import React, { useState, useEffect, useMemo } from 'react';
import { 
  Wrench, 
  Settings, 
  User, 
  TrendingUp, 
  Plus, 
  PlusCircle,
  ClipboardCheck,
  Truck, 
  Shield, 
  Activity, 
  FileText, 
  AlertTriangle, 
  Trash2, 
  Edit, 
  Search, 
  Download, 
  RefreshCw, 
  CheckCircle, 
  XCircle, 
  Clock, 
  Eye, 
  ChevronRight, 
  Package, 
  Disc, 
  Navigation, 
  Check, 
  BarChart2, 
  ShieldAlert, 
  Calendar,
  Users,
  UserCheck,
  FileSpreadsheet,
  Layers,
  ExternalLink,
  LogOut,
  Camera,
  Upload,
  Info,
  MapPin,
  Maximize2,
  AlertCircle
} from 'lucide-react';

const MECHANICS_LIST = [
  "Alvi", "Wahiyo", "Topik", "Chandra", "Apri", "Obi", "Dwi", "Khabul", "Dian", "Ega", 
  "Gagah", "Rio", "Agung", "Agus", "Eko", "Deril", "Wisnu", "Tegar", "Anja", "Wahyu", 
  "Anas", "Rabani"
];

const CHECKERS_LIST = [
  "Wahyu", "Bono", "Andi", "Firdaus"
];

// 1. GENERATE 100 UNIT BUS TSW (TSW 001 - TSW 100) OTOMATIS
const FLEET_UNITS = Array.from({length: 100}, (_, i) => `TSW ${String(i + 1).padStart(3, '0')}`);

const DEFAULT_SPAREPARTS = [
  { kode: "SP-BRK-01", nama: "Kampas Rem Depan Heavy Duty (Set)", qty: 24, unit: "Set", minQty: 5 },
  { kode: "SP-OIL-15W", nama: "Oli Mesin Synthetic 15W-40", qty: 210, unit: "Liter", minQty: 40 },
  { kode: "SP-FIL-O1", nama: "Filter Oli Bus Scania Type-A", qty: 15, unit: "Pcs", minQty: 4 },
  { kode: "SP-BELT-99", nama: "Fan Belt High-Tension v3", qty: 12, unit: "Pcs", minQty: 3 },
  { kode: "SP-TIRE-295", nama: "Ban Radial Tubeless 295/80 R22.5", qty: 18, unit: "Pcs", minQty: 4 },
  { kode: "SP-ALT-24V", nama: "Alternator Heavy Duty 24V 150A", qty: 3, unit: "Pcs", minQty: 2 },
  { kode: "SP-CLU-M1", nama: "Clutch Plate Master Kit Scania", qty: 4, unit: "Set", minQty: 2 }
];

const DEFAULT_VEHICLES_PM = [
  { noBody: "TSW 001", currentKM: 45200, nextPMTarget: 50000, model: "Scania K360IB", status: "Aman" },
  { noBody: "TSW 045", currentKM: 119850, nextPMTarget: 120000, model: "Mercedes-Benz OH 1626", status: "Mendekati PM" },
  { noBody: "TSW 022", currentKM: 92120, nextPMTarget: 90000, model: "Hino RK8", status: "Overdue" },
  { noBody: "TSW 089", currentKM: 201300, nextPMTarget: 210000, model: "Volvo B11R", status: "Aman" },
  { noBody: "TSW 100", currentKM: 15150, nextPMTarget: 20000, model: "Mercedes-Benz OF 917", status: "Aman" }
];

const DEFAULT_WORK_ORDERS = [
  {
    id: "WO-9901",
    noBody: "TSW 001",
    kmMasuk: 45200,
    keluhan: "AC kabin belakang berisik & embusan udara kurang dingin mendadak",
    prioritas: "Sedang",
    status: "Pending",
    mekanik: [],
    jamMulai: "",
    jamSelesai: "",
    durasi: 0,
    tindakan: "",
    sparepart: [],
    checker: "Bono",
    tanggal: "2026-05-20",
    fotoBefore: "https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=600&auto=format&fit=crop&q=60",
    fotoAfter: ""
  },
  {
    id: "WO-9902",
    noBody: "TSW 045",
    kmMasuk: 119850,
    keluhan: "Pedal kopling keras & ada rembesan oli tipis di dekat transmisi bawah",
    prioritas: "Tinggi",
    status: "Aktif",
    mekanik: ["Alvi", "Wahiyo"],
    jamMulai: "2026-05-22T08:00",
    jamSelesai: "",
    durasi: 0,
    tindakan: "",
    sparepart: [],
    checker: "Andi",
    tanggal: "2026-05-22",
    fotoBefore: "https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?w=600&auto=format&fit=crop&q=60",
    fotoAfter: ""
  }
];

const DEFAULT_STORING = [
  {
    id: "STR-5001",
    noBody: "TSW 089",
    lokasi: "Halte Busway Pancoran Barat Arah Grogol",
    kendala: "Pipa radiator pecah menyebabkan air pendingin habis & mesin overheat",
    tindakan: "Potong bagian pipa bocor, pasang clamp bypass darurat, isi air coolant penuh",
    mekanik: ["Obi", "Khabul"],
    jamMulai: "2026-05-22T14:00",
    jamSelesai: "2026-05-22T15:30",
    status: "Selesai",
    foto: "https://images.unsplash.com/photo-1511919884226-fd3cad34687c?w=600&auto=format&fit=crop&q=60"
  },
  {
    id: "STR-5002",
    noBody: "TSW 100",
    lokasi: "Samping Gerbang Tol Kebon Jeruk 1",
    kendala: "Angin kompresor drop tiba-tiba, rem mengunci otomatis di lajur kiri",
    tindakan: "",
    mekanik: ["Alvi", "Topik"],
    jamMulai: "2026-05-24T09:00",
    jamSelesai: "",
    status: "OTW",
    foto: ""
  }
];

const DEFAULT_TIRE_SWAPS = [
  {
    id: "BAN-8001",
    noBody: "TSW 001",
    posisi: "Roda Depan Kanan",
    kmBan: 85200,
    barcodeLama: "BC-SL-8812A",
    barcodeBaru: "BC-SN-9905X",
    mekanik: ["Wahiyo", "Apri"],
    jamMulai: "2026-05-18T10:00",
    jamSelesai: "2026-05-18T11:15",
    fotoLama: "https://images.unsplash.com/photo-1578844251758-2f71da64c96f?w=400",
    fotoBaru: "https://images.unsplash.com/photo-1580273916550-e323be2ae537?w=400"
  }
];

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(() => {
    return localStorage.getItem('tj_logged_in') === 'true';
  });
  const [currentRole, setCurrentRole] = useState(() => {
    return localStorage.getItem('tj_workshop_role') || 'checker';
  });
  const [currentUserName, setCurrentUserName] = useState(() => {
    return localStorage.getItem('tj_user_name') || '';
  });

  const [workOrders, setWorkOrders] = useState(() => {
    const saved = localStorage.getItem('tj_db_work_orders');
    return saved ? JSON.parse(saved) : DEFAULT_WORK_ORDERS;
  });

  const [spareparts, setSpareparts] = useState(() => {
    const saved = localStorage.getItem('tj_db_spareparts');
    return saved ? JSON.parse(saved) : DEFAULT_SPAREPARTS;
  });

  const [vehiclesPM, setVehiclesPM] = useState(() => {
    const saved = localStorage.getItem('tj_db_vehicles_pm');
    return saved ? JSON.parse(saved) : DEFAULT_VEHICLES_PM;
  });

  const [storingList, setStoringList] = useState(() => {
    const saved = localStorage.getItem('tj_db_storing_list');
    return saved ? JSON.parse(saved) : DEFAULT_STORING;
  });

  const [tireSwaps, setTireSwaps] = useState(() => {
    const saved = localStorage.getItem('tj_db_tire_swaps');
    return saved ? JSON.parse(saved) : DEFAULT_TIRE_SWAPS;
  });

  const [inspectionLogs, setInspectionLogs] = useState(() => {
    const saved = localStorage.getItem('tj_db_inspection_logs');
    return saved ? JSON.parse(saved) : [];
  });

  const [spreadsheetUrl, setSpreadsheetUrl] = useState(() => {
    return localStorage.getItem('tj_sheet_webhook') || '';
  });

  const [activeTab, setActiveTab] = useState('dashboard');
  const [mechanicSubTab, setMechanicSubTab] = useState('tugas'); 
  const [toasts, setToasts] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  
  const [showConfirmReset, setShowConfirmReset] = useState(false);
  const [leaderAssignWO, setLeaderAssignWO] = useState(null);
  const [assignedMeks, setAssignedMeks] = useState([]);
  const [leaderNotes, setLeaderNotes] = useState('');
  const [estimatedDuration, setEstimatedDuration] = useState('4');
  
  const [tempBase64Image, setTempBase64Image] = useState('');
  const [tempBase64ImageAfter, setTempBase64ImageAfter] = useState('');
  
  const [newPartForm, setNewPartForm] = useState({ kode: '', nama: '', qty: '', unit: 'Pcs', minQty: '3' });
  const [isEditingPart, setIsEditingPart] = useState(null);
  const [showAddPartModal, setShowAddPartModal] = useState(false);
  const [zoomImgUrl, setZoomImgUrl] = useState(null);

  useEffect(() => {
    localStorage.setItem('tj_logged_in', isLoggedIn);
    localStorage.setItem('tj_workshop_role', currentRole);
    localStorage.setItem('tj_user_name', currentUserName);
  }, [isLoggedIn, currentRole, currentUserName]);

  useEffect(() => {
    localStorage.setItem('tj_db_work_orders', JSON.stringify(workOrders));
  }, [workOrders]);

  useEffect(() => {
    localStorage.setItem('tj_db_spareparts', JSON.stringify(spareparts));
  }, [spareparts]);

  useEffect(() => {
    localStorage.setItem('tj_db_vehicles_pm', JSON.stringify(vehiclesPM));
  }, [vehiclesPM]);

  useEffect(() => {
    localStorage.setItem('tj_db_storing_list', JSON.stringify(storingList));
  }, [storingList]);

  useEffect(() => {
    localStorage.setItem('tj_db_tire_swaps', JSON.stringify(tireSwaps));
  }, [tireSwaps]);

  useEffect(() => {
    localStorage.setItem('tj_db_inspection_logs', JSON.stringify(inspectionLogs));
  }, [inspectionLogs]);

  useEffect(() => {
    localStorage.setItem('tj_sheet_webhook', spreadsheetUrl);
  }, [spreadsheetUrl]);

  const triggerToast = (msg, type = 'success') => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, msg, type }]);
    setTimeout(() => {
      setToasts(prev => prev.filter(t => t.id !== id));
    }, 4000);
  };

  const removeToast = (id) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  };

  const sendToGoogleSheets = async (sheetType, payloadData) => {
    if (!spreadsheetUrl) return; 
    try {
      const response = await fetch(spreadsheetUrl, {
        method: "POST",
        mode: "no-cors", 
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          sheet: sheetType,
          data: payloadData
        })
      });
      triggerToast("📡 Sinkronisasi Google Sheets berhasil berjalan di latar belakang!", "success");
    } catch (err) {
      console.warn("Spreadsheet dispatch failure", err);
    }
  };

  const handleFileChange = (e, setTargetState) => {
    const file = e.target.files[0];
    if (file) {
      if (file.size > 1.5 * 1024 * 1024) {
        triggerToast("Ukuran berkas terlalu besar! Maksimal 1.5MB.", "error");
        return;
      }
      const reader = new FileReader();
      reader.onloadend = () => {
        setTargetState(reader.result);
        triggerToast("Foto berhasil dimuat!", "success");
      };
      reader.readAsDataURL(file);
    }
  };

  const handleLogin = (role, name) => {
    if (!name) {
      triggerToast("Pilih nama Anda sebelum masuk!", "error");
      return;
    }
    setCurrentRole(role);
    setCurrentUserName(name);
    setIsLoggedIn(true);

    if (role === 'checker') setActiveTab('checker_form');
    else if (role === 'mechanic') setActiveTab('mechanic_tasks');
    else setActiveTab('dashboard');

    triggerToast(`Selamat datang kembali, ${name}! (${role.toUpperCase()})`, "success");
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setCurrentUserName('');
    triggerToast("Anda berhasil keluar dari sistem.", "warning");
  };

  const stats = useMemo(() => {
    const total = workOrders.length;
    const pending = workOrders.filter(w => w.status === 'Pending').length;
    const aktif = workOrders.filter(w => w.status === 'Aktif').length;
    const waiting = workOrders.filter(w => w.status === 'Menunggu Approval').length;
    const approved = workOrders.filter(w => w.status === 'Approved').length;
    const rejected = workOrders.filter(w => w.status === 'Rejected').length;

    const performance = MECHANICS_LIST.map(name => {
      const assignedJobs = workOrders.filter(w => w.mekanik.includes(name));
      const completedJobs = assignedJobs.filter(w => w.status === 'Approved');
      
      let totalTime = 0;
      completedJobs.forEach(j => {
        if (j.durasi) totalTime += j.durasi;
      });

      const avgDur = completedJobs.length > 0 ? Math.round(totalTime / completedJobs.length) : 0;
      const totalStoring = storingList.filter(s => s.mekanik.includes(name) && s.status === 'Selesai').length;
      const totalTire = tireSwaps.filter(t => t.mekanik.includes(name)).length;
      
      const score = (completedJobs.length * 15) + (totalStoring * 20) + (totalTire * 10);

      return {
        name,
        assignedCount: assignedJobs.length,
        completedCount: completedJobs.length,
        avgDur,
        storingCount: totalStoring,
        tireCount: totalTire,
        score
      };
    }).sort((a, b) => b.score - a.score);

    const lowStockParts = spareparts.filter(s => s.qty <= s.minQty);
    const overduePM = vehiclesPM.filter(v => v.currentKM >= v.nextPMTarget).length;
    const nearPM = vehiclesPM.filter(v => v.currentKM < v.nextPMTarget && (v.nextPMTarget - v.currentKM) <= 2000).length;

    return {
      total,
      pending,
      aktif,
      waiting,
      approved,
      rejected,
      performance,
      lowStockCount: lowStockParts.length,
      lowStockParts,
      overduePM,
      nearPM
    };
  }, [workOrders, spareparts, storingList, tireSwaps, vehiclesPM]);

  const handleCreateWO = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const noBody = formData.get('noBody').toUpperCase().trim();
    const kmMasuk = parseInt(formData.get('kmMasuk'));
    const keluhan = (formData.get('keluhan') || '').trim();
    const prioritas = formData.get('prioritas');

    if (!noBody || !kmMasuk) {
      triggerToast("Harap isi No Body dan Odometer wajib!", "error");
      return;
    }

    const hasFinding = keluhan.length > 0;

    const newLog = {
      id: `INSP-${Date.now().toString().slice(-4)}`,
      noBody,
      kmMasuk,
      keluhan: hasFinding ? keluhan : "Tidak ada keluhan (Kondisi Unit Normal / Prima)",
      prioritas: hasFinding ? prioritas : "Rendah",
      checker: currentUserName,
      tanggal: new Date().toISOString().split('T')[0],
      status: hasFinding ? "Temuan Kerusakan" : "Armada Prima / Siap Dinas",
      fotoBefore: tempBase64Image || "https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=600&auto=format&fit=crop&q=60"
    };

    setInspectionLogs(prev => [newLog, ...prev]);
    sendToGoogleSheets("inspeksi", newLog);

    setVehiclesPM(prev => {
      const exists = prev.find(v => v.noBody === noBody);
      if (exists) {
        return prev.map(v => v.noBody === noBody ? { ...v, currentKM: kmMasuk } : v);
      } else {
        return [...prev, {
          noBody,
          currentKM: kmMasuk,
          nextPMTarget: Math.ceil((kmMasuk + 1) / 10000) * 10000,
          model: "Bus Transjakarta Hino/Scania",
          status: "Aman"
        }];
      }
    });

    if (hasFinding) {
      const newWO = {
        id: `WO-${Date.now().toString().slice(-4)}`,
        noBody,
        kmMasuk,
        keluhan,
        prioritas,
        status: "Pending",
        mekanik: [],
        jamMulai: "",
        jamSelesai: "",
        durasi: 0,
        tindakan: "",
        sparepart: [],
        checker: currentUserName,
        tanggal: new Date().toISOString().split('T')[0],
        fotoBefore: tempBase64Image || "https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=600&auto=format&fit=crop&q=60",
        fotoAfter: ""
      };
      setWorkOrders(prev => [newWO, ...prev]);
      sendToGoogleSheets("work_order", newWO);
      triggerToast(`Temuan kerusakan terdaftar! WO ${newWO.id} dikirim ke Leader.`, "success");
    } else {
      triggerToast(`Inspeksi berhasil! Armada ${noBody} dalam kondisi PRIMA (Siap Jalan).`, "success");
    }

    setTempBase64Image('');
    e.target.reset();
  };

  const handleSelfReportSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const noBody = formData.get('noBody').toUpperCase().trim();
    const keluhan = formData.get('keluhan').trim();
    const kmMasuk = parseInt(formData.get('kmMasuk') || '0');
    const partCode = formData.get('partCode');
    const partQty = parseInt(formData.get('partQty') || '0');

    if (!noBody || !keluhan) {
      triggerToast("Mohon isi nomor armada dan detail temuan!", "error");
      return;
    }

    let partsUsed = [];
    if (partCode && partQty > 0) {
      const targetPart = spareparts.find(p => p.kode === partCode);
      if (targetPart) {
        if (targetPart.qty < partQty) {
          triggerToast(`Stok ${targetPart.nama} tidak cukup! (Tersedia: ${targetPart.qty})`, "error");
          return;
        }
        partsUsed.push({ kode: partCode, nama: targetPart.nama, qty: partQty });
        
        const updatedPart = { ...targetPart, qty: targetPart.qty - partQty };
        setSpareparts(prev => prev.map(p => p.kode === partCode ? updatedPart : p));
        
        // Update stok sparepart di Google Sheets
        sendToGoogleSheets("spareparts", updatedPart);
      }
    }

    const newWO = {
      id: `WO-M-${Date.now().toString().slice(-4)}`,
      noBody,
      kmMasuk,
      keluhan: `[TEMUAN SPONTAN] ${keluhan}`,
      prioritas: "Sedang",
      status: "Menunggu Approval",
      mekanik: [currentUserName],
      jamMulai: new Date().toISOString().slice(0, 16),
      jamSelesai: new Date().toISOString().slice(0, 16),
      durasi: 30, 
      tindakan: keluhan,
      sparepart: partsUsed,
      checker: currentUserName,
      tanggal: new Date().toISOString().split('T')[0],
      fotoBefore: tempBase64Image || "",
      fotoAfter: tempBase64Image || ""
    };

    setWorkOrders(prev => [newWO, ...prev]);
    sendToGoogleSheets("work_order", newWO);
    setTempBase64Image('');
    triggerToast(`Laporan Mandiri ${newWO.id} dikirim ke Leader! Stok terpotong.`, "success");
    e.target.reset();
    setMechanicSubTab('tugas'); 
  };

  const handleAssignWO = () => {
    if (assignedMeks.length === 0) {
      triggerToast("Silakan tunjuk minimal satu mekanik!", "error");
      return;
    }

    const targetWO = workOrders.find(w => w.id === leaderAssignWO.id);
    if (targetWO) {
      const updatedWO = {
        ...targetWO,
        status: "Aktif",
        mekanik: assignedMeks,
        jamMulai: new Date().toISOString().slice(0, 16),
        leaderNotes: leaderNotes || "Lakukan perbaikan dan cek sensor terkait."
      };
      setWorkOrders(prev => prev.map(w => w.id === leaderAssignWO.id ? updatedWO : w));
      sendToGoogleSheets("work_order", updatedWO);
    }

    triggerToast(`WO ${leaderAssignWO.id} ditugaskan ke: ${assignedMeks.join(', ')}`, "success");
    setLeaderAssignWO(null);
    setAssignedMeks([]);
    setLeaderNotes('');
  };

  const handleRejectWO = (woId) => {
    const targetWO = workOrders.find(w => w.id === woId);
    if (targetWO) {
      const rejectedWO = { ...targetWO, status: "Rejected" };
      setWorkOrders(prev => prev.map(w => w.id === woId ? rejectedWO : w));
      sendToGoogleSheets("work_order", rejectedWO);
    }
    triggerToast(`Work Order ${woId} ditolak oleh Leader.`, "warning");
  };

  const handleCompleteRepair = (e, woId) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const tindakan = formData.get('tindakan').trim();
    const partCode = formData.get('partCode');
    const partQty = parseInt(formData.get('partQty') || '0');

    if (!tindakan) {
      triggerToast("Mohon isi deskripsi tindakan perbaikan!", "error");
      return;
    }

    let partsUsed = [];
    if (partCode && partQty > 0) {
      const targetPart = spareparts.find(p => p.kode === partCode);
      if (targetPart) {
        if (targetPart.qty < partQty) {
          triggerToast(`Stok ${targetPart.nama} tidak cukup! (Tersedia: ${targetPart.qty})`, "error");
          return;
        }

        partsUsed.push({
          kode: partCode,
          nama: targetPart.nama,
          qty: partQty
        });

        const updatedPart = { ...targetPart, qty: targetPart.qty - partQty };
        setSpareparts(prev => prev.map(p => p.kode === partCode ? updatedPart : p));
        
        // Update stok spareparts di Google Sheets
        sendToGoogleSheets("spareparts", updatedPart);
      }
    }

    const targetWO = workOrders.find(w => w.id === woId);
    if (targetWO) {
      const start = targetWO.jamMulai ? new Date(targetWO.jamMulai) : new Date();
      const end = new Date();
      const diffMin = Math.max(15, Math.round((end - start) / 60000));

      const completedWO = {
        ...targetWO,
        status: "Menunggu Approval",
        jamSelesai: end.toISOString().slice(0, 16),
        durasi: diffMin,
        tindakan,
        sparepart: partsUsed,
        fotoAfter: tempBase64ImageAfter || "https://images.unsplash.com/photo-1563720223185-11003d516935?w=600&auto=format&fit=crop&q=60"
      };
      
      setWorkOrders(prev => prev.map(w => w.id === woId ? completedWO : w));
      sendToGoogleSheets("work_order", completedWO);
    }

    setTempBase64ImageAfter('');
    triggerToast(`WO ${woId} selesai diperbaiki! Menunggu persetujuan Leader Mekanik.`, "success");
  };

  const handleApproveCompletion = (woId) => {
    const targetWO = workOrders.find(w => w.id === woId);
    if (targetWO) {
      const approvedWO = { ...targetWO, status: "Approved" };
      setWorkOrders(prev => prev.map(w => w.id === woId ? approvedWO : w));
      sendToGoogleSheets("work_order", approvedWO);
    }
    triggerToast(`WO ${woId} disetujui, bus siap kembali berdinas!`, "success");
  };

  const handleResetPMInterval = (noBody) => {
    setVehiclesPM(prev => prev.map(v => {
      if (v.noBody === noBody) {
        const nextTarget = Math.ceil((v.currentKM + 1) / 10000) * 10000 + 10000;
        triggerToast(`PM Armada ${noBody} direset ke target baru: ${nextTarget.toLocaleString()} KM`, "success");
        return { ...v, nextPMTarget: nextTarget };
      }
      return v;
    }));
  };

  const handleAddStoringByLeader = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const noBody = formData.get('noBody').toUpperCase().trim();
    const lokasi = formData.get('lokasi').trim();
    const kendala = formData.get('kendala').trim();
    const selectedMeks = assignedMeks;

    if (!noBody || !lokasi || !kendala || selectedMeks.length === 0) {
      triggerToast("Mohon lengkapi data dispatch rescue!", "error");
      return;
    }

    const newStoring = {
      id: `STR-${Date.now().toString().slice(-4)}`,
      noBody,
      lokasi,
      kendala,
      tindakan: "",
      mekanik: selectedMeks,
      jamMulai: new Date().toISOString().slice(0, 16),
      jamSelesai: "",
      status: "OTW",
      foto: ""
    };

    setStoringList(prev => [newStoring, ...prev]);
    sendToGoogleSheets("storing", newStoring);
    setAssignedMeks([]);
    triggerToast(`Tim Rescue ${selectedMeks.join(', ')} resmi diberangkatkan ke ${lokasi}!`, "success");
    e.target.reset();
  };

  const handleCompleteStoringByMechanic = (e, storingId) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const tindakan = formData.get('tindakan').trim();

    if (!tindakan) {
      triggerToast("Harap ketik rincian tindakan emergency yang Anda lakukan!", "error");
      return;
    }

    const targetStoring = storingList.find(s => s.id === storingId);
    if (targetStoring) {
      const completedStoring = {
        ...targetStoring,
        tindakan,
        status: "Selesai",
        jamSelesai: new Date().toISOString().slice(0, 16),
        foto: tempBase64Image || "https://images.unsplash.com/photo-1511919884226-fd3cad34687c?w=600&auto=format&fit=crop&q=60"
      };
      setStoringList(prev => prev.map(s => s.id === storingId ? completedStoring : s));
      sendToGoogleSheets("storing", completedStoring);
    }

    setTempBase64Image('');
    triggerToast(`Laporan Rescue ${storingId} berhasil diselesaikan di lokasi!`, "success");
  };

  const handleAddTireSwap = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const noBody = formData.get('noBody').toUpperCase().trim();
    const posisi = formData.get('posisi');
    const kmBan = parseInt(formData.get('kmBan') || '0');
    const barcodeLama = formData.get('barcodeLama').trim();
    const barcodeBaru = formData.get('barcodeBaru').trim();
    const selectedMeks = assignedMeks;

    if (!noBody || !posisi || !kmBan || !barcodeLama || !barcodeBaru || selectedMeks.length === 0) {
      triggerToast("Data penggantian ban tidak lengkap!", "error");
      return;
    }

    const tireCode = "SP-TIRE-295";
    const tirePart = spareparts.find(p => p.kode === tireCode);
    if (tirePart && tirePart.qty <= 0) {
      triggerToast("Gagal! Stok Ban Radial Tubeless di gudang saat ini habis.", "error");
      return;
    }

    const updatedTire = { ...tirePart, qty: Math.max(0, tirePart.qty - 1) };
    setSpareparts(prev => prev.map(p => {
      if (p.kode === tireCode) {
        return updatedTire;
      }
      return p;
    }));

    // Sinkronisasi sisa ban radial ke Google Sheets
    sendToGoogleSheets("spareparts", updatedTire);

    const newSwap = {
      id: `BAN-${Date.now().toString().slice(-4)}`,
      noBody,
      posisi,
      kmBan,
      barcodeLama,
      barcodeBaru,
      mekanik: selectedMeks,
      jamMulai: new Date().toISOString().slice(0, 16),
      jamSelesai: new Date().toISOString().slice(0, 16),
      fotoLama: tempBase64Image || "https://images.unsplash.com/photo-1578844251758-2f71da64c96f?w=400",
      fotoBaru: tempBase64ImageAfter || "https://images.unsplash.com/photo-1580273916550-e323be2ae537?w=400"
    };

    setTireSwaps(prev => [newSwap, ...prev]);
    sendToGoogleSheets("ganti_ban", newSwap);
    setTempBase64Image('');
    setTempBase64ImageAfter('');
    setAssignedMeks([]);
    triggerToast(`Data ganti ban berhasil disimpan. Stok Ban Radial gudang terpotong 1 Pcs.`, "success");
    e.target.reset();
  };

  const handleSavePart = (e) => {
    e.preventDefault();
    if (!newPartForm.kode || !newPartForm.nama || newPartForm.qty === '') {
      triggerToast("Kode, Nama, dan Kuantitas Suku Cadang wajib diisi!", "error");
      return;
    }

    const codeUpper = newPartForm.kode.toUpperCase().trim();
    const qtyInt = parseInt(newPartForm.qty);
    const minQtyInt = parseInt(newPartForm.minQty || '3');

    const existsIndex = spareparts.findIndex(p => p.kode === codeUpper);
    const updatedPart = {
      kode: codeUpper,
      nama: newPartForm.nama,
      qty: qtyInt,
      unit: newPartForm.unit,
      minQty: minQtyInt
    };

    if (existsIndex >= 0 && isEditingPart !== 'new') {
      setSpareparts(prev => prev.map((p, idx) => idx === existsIndex ? updatedPart : p));
      triggerToast(`Data Suku Cadang ${codeUpper} diperbarui!`, "success");
      
      // Kirim pembaruan suku cadang ke Google Sheets (Update Baris)
      sendToGoogleSheets("spareparts", updatedPart);
    } else {
      if (spareparts.find(p => p.kode === codeUpper)) {
        triggerToast("Kode suku cadang sudah digunakan!", "error");
        return;
      }
      setSpareparts(prev => [...prev, updatedPart]);
      triggerToast(`Suku cadang baru ${codeUpper} didaftarkan!`, "success");
      
      // Kirim suku cadang baru ke Google Sheets (Tambah Baris)
      sendToGoogleSheets("spareparts", updatedPart);
    }

    setNewPartForm({ kode: '', nama: '', qty: '', unit: 'Pcs', minQty: '3' });
    setIsEditingPart(null);
    setShowAddPartModal(false);
  };

  const handleRemovePart = (code) => {
    setSpareparts(prev => prev.filter(p => p.kode !== code));
    triggerToast(`Suku cadang ${code} dihapus.`, "warning");
  };

  const triggerResetSystem = () => {
    setWorkOrders(DEFAULT_WORK_ORDERS);
    setSpareparts(DEFAULT_SPAREPARTS);
    setVehiclesPM(DEFAULT_VEHICLES_PM);
    setStoringList(DEFAULT_STORING);
    setTireSwaps(DEFAULT_TIRE_SWAPS);
    setInspectionLogs([]);
    triggerToast("Sistem bengkel berhasil di-reset ke setelan awal.", "warning");
    setShowConfirmReset(false);
  };

  const filteredWorkOrders = useMemo(() => {
    return workOrders.filter(w => {
      const matchText = `${w.id} ${w.noBody} ${w.keluhan} ${w.prioritas} ${w.status} ${w.checker}`.toLowerCase();
      return matchText.includes(searchQuery.toLowerCase());
    });
  }, [workOrders, searchQuery]);

  const myMechanicJobs = useMemo(() => {
    return workOrders.filter(w => w.mekanik.includes(currentUserName) && w.status === 'Aktif');
  }, [workOrders, currentUserName]);

  const myMechanicStoringJobs = useMemo(() => {
    return storingList.filter(s => s.mekanik.includes(currentUserName) && s.status === 'OTW');
  }, [storingList, currentUserName]);

  const handleExportCSV = (type) => {
    let headers = [];
    let rows = [];
    let filename = `laporan_${type}_${Date.now()}.csv`;

    const cleanCell = (val) => {
      if (val === undefined || val === null) return '""';
      let str = String(val);
      str = str.replace(/\r?\n|\r/g, ' '); 
      str = str.replace(/"/g, '""'); 
      return `"${str}"`;
    };

    if (type === 'work_orders') {
      headers = ['ID WO', 'No Body', 'KM Masuk', 'Keluhan', 'Prioritas', 'Status', 'Mekanik', 'Tanggal', 'Tindakan', 'Checker'];
      rows = workOrders.map(w => [
        cleanCell(w.id), 
        cleanCell(w.noBody), 
        cleanCell(w.kmMasuk), 
        cleanCell(w.keluhan), 
        cleanCell(w.prioritas), 
        cleanCell(w.status), 
        cleanCell(w.mekanik.join(', ')), 
        cleanCell(w.tanggal),
        cleanCell(w.tindakan || 'Belum ada'),
        cleanCell(w.checker)
      ]);
    } else {
      headers = ['Kode', 'Nama Suku Cadang', 'Jumlah Stok', 'Satuan', 'Batas Minimum'];
      rows = spareparts.map(p => [
        cleanCell(p.kode), 
        cleanCell(p.nama), 
        cleanCell(p.qty), 
        cleanCell(p.unit), 
        cleanCell(p.minQty)
      ]);
    }

    const delimiter = ";";
    const csvContent = "\uFEFF" 
      + `sep=${delimiter}\n` 
      + headers.join(delimiter) + "\n"
      + rows.map(r => r.join(delimiter)).join('\n');

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.setAttribute("href", url);
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    triggerToast(`Ekspor ${filename} sukses! Format rapi & terbagi kolom Excel.`, "success");
  };

  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4 font-sans selection:bg-cyan-500 selection:text-slate-950">
        <div className="fixed top-6 right-6 z-50 space-y-3 max-w-md w-full pointer-events-none">
          {toasts.map(t => (
            <div 
              key={t.id} 
              className={`pointer-events-auto flex items-start justify-between p-4 rounded-xl shadow-2xl border backdrop-blur-md transition-all duration-300 animate-slide-in ${
                t.type === 'success' ? 'bg-emerald-950/95 border-emerald-500/40 text-emerald-300' :
                t.type === 'warning' ? 'bg-amber-950/95 border-amber-500/40 text-amber-300' :
                'bg-red-955/95 border-red-500/40 text-red-300'
              }`}
            >
              <div className="flex gap-3">
                <span className="mt-0.5">
                  {t.type === 'success' && <CheckCircle className="w-5 h-5 text-emerald-400" />}
                  {t.type === 'warning' && <AlertTriangle className="w-5 h-5 text-amber-400" />}
                  {t.type === 'error' && <XCircle className="w-5 h-5 text-red-400" />}
                </span>
                <div>
                  <p className="text-sm font-semibold">{t.msg}</p>
                </div>
              </div>
              <button onClick={() => removeToast(t.id)} className="text-slate-400 hover:text-white ml-4 font-bold text-lg leading-none">&times;</button>
            </div>
          ))}
        </div>

        <div className="max-w-md w-full bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl space-y-6">
          <div className="text-center space-y-2">
            <div className="inline-flex p-3 bg-gradient-to-tr from-cyan-500 to-indigo-600 rounded-2xl shadow-lg mb-2">
              <Wrench className="w-8 h-8 text-slate-950 stroke-[2.5]" />
            </div>
            <h1 className="text-xl font-black tracking-wider text-white">
              BENGKEL TRANSJAKARTA
            </h1>
            <p className="text-xs text-slate-400 font-mono">Sistem Perawatan Bus & Integrasi Depo</p>
          </div>
          <LoginForm onSubmitLogin={handleLogin} />
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans selection:bg-cyan-500 selection:text-slate-950">
      
      {/* 2. DATALIST UNTUK AUTOCOMPLETE NOMOR BODY BUS */}
      <datalist id="fleet-bus-list">
        {FLEET_UNITS.map(unit => (
          <option key={unit} value={unit} />
        ))}
      </datalist>

      <div className="fixed top-6 right-6 z-50 space-y-3 max-w-md w-full pointer-events-none">
        {toasts.map(t => (
          <div 
            key={t.id} 
            className={`pointer-events-auto flex items-start justify-between p-4 rounded-xl shadow-2xl border backdrop-blur-md transition-all duration-300 animate-slide-in ${
              t.type === 'success' ? 'bg-emerald-950/95 border-emerald-500/40 text-emerald-300' :
              t.type === 'warning' ? 'bg-amber-950/95 border-amber-500/40 text-amber-300' :
              'bg-red-955/95 border-red-500/40 text-red-300'
            }`}
          >
            <div className="flex gap-3">
              <span className="mt-0.5">
                {t.type === 'success' && <CheckCircle className="w-5 h-5 text-emerald-400" />}
                {t.type === 'warning' && <AlertTriangle className="w-5 h-5 text-amber-400" />}
                {t.type === 'error' && <XCircle className="w-5 h-5 text-red-400" />}
              </span>
              <div>
                <p className="text-sm font-semibold">{t.msg}</p>
              </div>
            </div>
            <button onClick={() => removeToast(t.id)} className="text-slate-400 hover:text-white ml-4 font-bold text-lg leading-none">&times;</button>
          </div>
        ))}
      </div>

      <header className="bg-slate-900/90 backdrop-blur-md border-b border-slate-800 py-3.5 px-4 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4 sticky top-0 z-40">
        <div className="flex items-center gap-3">
          <div className="p-2.5 bg-gradient-to-tr from-cyan-500 to-indigo-600 rounded-xl shadow-lg">
            <Wrench className="w-6 h-6 text-slate-950 stroke-[2.5]" />
          </div>
          <div>
            <h1 className="text-base lg:text-lg font-black tracking-wider text-white flex items-center gap-2">
              BENGKEL TRANSJAKARTA <span className="bg-cyan-500/10 text-cyan-400 text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-full border border-cyan-500/20">RAWA BUAYA</span>
            </h1>
            <p className="text-xs text-slate-400 font-mono">Transjakarta Maintenance Management System</p>
          </div>
        </div>

        <div className="flex items-center gap-3 bg-slate-950 p-2 rounded-2xl border border-slate-800">
          <div className="text-right pl-3">
            <span className="text-xs font-bold text-white block">{currentUserName}</span>
            <span className="text-[10px] text-cyan-400 font-semibold font-mono uppercase bg-cyan-500/10 px-1.5 py-0.2 rounded">
              {currentRole}
            </span>
          </div>
          <button 
            onClick={handleLogout}
            title="Keluar Shift"
            className="p-2.5 bg-slate-900 hover:bg-rose-955/40 text-slate-400 hover:text-rose-400 rounded-xl transition-all border border-slate-850"
          >
            <LogOut className="w-4 h-4" />
          </button>
        </div>
      </header>

      <div className="flex-1 flex flex-col lg:flex-row">
        
        <aside className="w-full lg:w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col gap-1.5 lg:min-h-[calc(100vh-80px)]">
          <p className="text-[10px] font-extrabold text-slate-500 tracking-wider uppercase px-2.5 mb-2">MENU PERAN DINAS</p>
          
          {(currentRole === 'admin' || currentRole === 'leader') && (
            <button 
              onClick={() => setActiveTab('dashboard')}
              className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                activeTab === 'dashboard' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
              }`}
            >
              <span className="flex items-center gap-2.5">
                <BarChart2 className="w-4 h-4" /> Analitik Utama
              </span>
              <ChevronRight className="w-3.5 h-3.5 opacity-40" />
            </button>
          )}

          {currentRole === 'checker' && (
            <>
              <button 
                onClick={() => setActiveTab('checker_form')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'checker_form' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <Plus className="w-4 h-4" /> Inspeksi Armada Baru
                </span>
                <ChevronRight className="w-3.5 h-3.5 opacity-40" />
              </button>
              
              <button 
                onClick={() => setActiveTab('checker_history')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'checker_history' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <FileText className="w-4 h-4" /> Log Inspeksi Saya
                </span>
                <ChevronRight className="w-3.5 h-3.5 opacity-40" />
              </button>
            </>
          )}

          {currentRole === 'mechanic' && (
            <button 
              onClick={() => setActiveTab('mechanic_tasks')}
              className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                activeTab === 'mechanic_tasks' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
              }`}
            >
              <span className="flex items-center gap-2.5">
                <Wrench className="w-4 h-4" /> Pekerjaan Aktif Anda
              </span>
              <span className="bg-emerald-500/20 text-emerald-400 text-xs px-2 py-0.5 rounded-full font-bold">
                {myMechanicJobs.length + myMechanicStoringJobs.length}
              </span>
            </button>
          )}

          {currentRole !== 'checker' && (
            <>
              <p className="text-[10px] font-extrabold text-slate-500 tracking-wider uppercase px-2.5 mt-4 mb-2">MODUL UTAMA DEPO</p>
              
              <button 
                onClick={() => setActiveTab('workorders')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'workorders' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <FileText className="w-4 h-4" /> Semua Work Orders
                </span>
                <span className="bg-slate-950 text-slate-400 text-xs px-2 py-0.5 rounded-full font-mono">
                  {workOrders.length}
                </span>
              </button>

              <button 
                onClick={() => setActiveTab('preventive')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'preventive' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <Activity className="w-4 h-4" /> Monitoring PM 10K
                </span>
                {stats.overduePM > 0 && (
                  <span className="bg-rose-500/20 text-rose-400 text-[10px] font-bold px-1.5 py-0.5 rounded">
                    {stats.overduePM} Alert
                  </span>
                )}
              </button>

              <button 
                onClick={() => setActiveTab('storing')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'storing' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <Truck className="w-4 h-4" /> Storing / Rescue Jalan
                </span>
                <ChevronRight className="w-3.5 h-3.5 opacity-40" />
              </button>

              <button 
                onClick={() => setActiveTab('tires')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'tires' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <Disc className="w-4 h-4" /> Penggantian Ban Bus
                </span>
                <ChevronRight className="w-3.5 h-3.5 opacity-40" />
              </button>

              <button 
                onClick={() => setActiveTab('gudang')}
                className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all ${
                  activeTab === 'gudang' ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20' : 'text-slate-400 hover:bg-slate-850 hover:text-white'
                }`}
              >
                <span className="flex items-center gap-2.5">
                  <Package className="w-4 h-4" /> Gudang Spareparts
                </span>
                {stats.lowStockCount > 0 && (
                  <span className="bg-amber-500/20 text-amber-300 text-[10px] font-bold px-1.5 py-0.5 rounded">
                    {stats.lowStockCount} Limit
                  </span>
                )}
              </button>

              {(currentRole === 'admin' || currentRole === 'leader') && (
                <button 
                  onClick={() => setActiveTab('google_sheets')}
                  className={`w-full flex items-center justify-between p-3 rounded-xl text-sm font-semibold transition-all border-dashed border ${
                    activeTab === 'google_sheets' 
                      ? 'bg-emerald-500/15 text-emerald-400 border-emerald-500/40' 
                      : 'border-slate-800 text-slate-400 hover:bg-slate-855 hover:text-white'
                  }`}
                >
                  <span className="flex items-center gap-2.5">
                    <FileSpreadsheet className="w-4 h-4 text-emerald-400" /> Integrasi Sheets
                  </span>
                  {spreadsheetUrl ? (
                    <span className="bg-emerald-500/10 text-emerald-400 text-[9px] px-1.5 rounded uppercase font-extrabold border border-emerald-500/25">Aktif</span>
                  ) : (
                    <span className="bg-slate-800 text-slate-500 text-[9px] px-1.5 rounded uppercase font-extrabold">Off</span>
                  )}
                </button>
              )}
            </>
          )}

          {currentRole === 'admin' && (
            <div className="mt-auto pt-4 border-t border-slate-800">
              <button 
                onClick={() => setShowConfirmReset(true)}
                className="w-full flex items-center justify-center gap-2 p-2 bg-rose-955/20 border border-rose-500/25 rounded-xl text-xs font-bold text-rose-400 hover:bg-rose-955/40 transition-all"
              >
                <RefreshCw className="w-3.5 h-3.5" /> Reset Data Sistem
              </button>
            </div>
          )}
        </aside>

        <main className="flex-1 p-4 lg:p-8 overflow-y-auto max-w-7xl mx-auto w-full space-y-6">

          {/* ================================================== */}
          {/* TAB: ANALITIK UTAMA (DASHBOARD)                    */}
          {/* ================================================== */}
          {activeTab === 'dashboard' && (currentRole === 'admin' || currentRole === 'leader') && (
            <div className="space-y-6 animate-fade-in">
              <div className="p-6 bg-gradient-to-r from-cyan-950/30 via-slate-900 to-indigo-955/30 rounded-2xl border border-cyan-500/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                  <h2 className="text-xl font-black text-white flex items-center gap-2">
                    <BarChart2 className="w-6 h-6 text-cyan-400" /> Analitik & Dashboard Pemantauan Depo
                  </h2>
                  <p className="text-slate-400 text-sm mt-1">Status real-time armada bus, ketersediaan suku cadang, dan performa mekanik.</p>
                </div>
                <div className="flex gap-2">
                  <button 
                    onClick={() => handleExportCSV('work_orders')}
                    className="bg-slate-900 hover:bg-slate-850 text-slate-300 border border-slate-800 font-bold px-3.5 py-2 rounded-xl text-xs flex items-center gap-1.5 transition-all"
                  >
                    <Download className="w-3.5 h-3.5 text-cyan-400" /> Ekspor WO (CSV)
                  </button>
                  <button 
                    onClick={() => handleExportCSV('spareparts')}
                    className="bg-slate-900 hover:bg-slate-850 text-slate-300 border border-slate-800 font-bold px-3.5 py-2 rounded-xl text-xs flex items-center gap-1.5 transition-all"
                  >
                    <Download className="w-3.5 h-3.5 text-emerald-400" /> Ekspor Gudang (CSV)
                  </button>
                </div>
              </div>

              {/* KPI Cards */}
              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="bg-slate-900/60 p-4 rounded-2xl border border-slate-800 space-y-2">
                  <div className="flex justify-between items-center text-slate-500">
                    <span className="text-[10px] font-black uppercase tracking-wider">Antrean WO Pending</span>
                    <Clock className="w-4 h-4 text-amber-400" />
                  </div>
                  <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-black text-white font-mono">{stats.pending}</span>
                    <span className="text-[10px] text-amber-400 font-bold">Butuh Tindakan</span>
                  </div>
                </div>

                <div className="bg-slate-900/60 p-4 rounded-2xl border border-slate-800 space-y-2">
                  <div className="flex justify-between items-center text-slate-500">
                    <span className="text-[10px] font-black uppercase tracking-wider">Sedang Dikerjakan</span>
                    <Activity className="w-4 h-4 text-cyan-400" />
                  </div>
                  <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-black text-white font-mono">{stats.aktif}</span>
                    <span className="text-[10px] text-cyan-400 font-bold">Mekanik Tiket</span>
                  </div>
                </div>

                <div className="bg-slate-900/60 p-4 rounded-2xl border border-slate-800 space-y-2">
                  <div className="flex justify-between items-center text-slate-500">
                    <span className="text-[10px] font-black uppercase tracking-wider">Overdue PM 10K</span>
                    <AlertTriangle className="w-4 h-4 text-rose-500" />
                  </div>
                  <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-black text-white font-mono">{stats.overduePM}</span>
                    <span className="text-[10px] text-rose-400 font-bold">Armada Alert</span>
                  </div>
                </div>

                <div className="bg-slate-900/60 p-4 rounded-2xl border border-slate-800 space-y-2">
                  <div className="flex justify-between items-center text-slate-500">
                    <span className="text-[10px] font-black uppercase tracking-wider">Stok Suku Cadang Limit</span>
                    <Package className="w-4 h-4 text-amber-500" />
                  </div>
                  <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-black text-white font-mono">{stats.lowStockCount}</span>
                    <span className="text-[10px] text-amber-400 font-bold">Kritis</span>
                  </div>
                </div>
              </div>

              {/* Main Dashboard Rows */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                
                <div className="lg:col-span-2 space-y-6">
                  {/* Mechanic Leaderboard */}
                  <div className="bg-slate-900/60 rounded-2xl border border-slate-800 p-5 space-y-4">
                    <h3 className="text-sm font-black text-white flex items-center gap-2">
                      <Users className="w-4 h-4 text-cyan-400" /> Papan Performa Mekanik Shift Ini
                    </h3>
                    
                    <div className="overflow-x-auto">
                      <table className="w-full text-left border-collapse text-xs">
                        <thead>
                          <tr className="border-b border-slate-800 text-slate-500 uppercase tracking-wider font-bold">
                            <th className="pb-2">Nama Mekanik</th>
                            <th className="pb-2 text-center">Tugas Aktif</th>
                            <th className="pb-2 text-center">WO Sukses</th>
                            <th className="pb-2 text-center">Storing/Rescue</th>
                            <th className="pb-2 text-center">Ganti Ban</th>
                            <th className="pb-2 text-right">Skor Kerja</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-800/40">
                          {stats.performance.slice(0, 7).map((p, idx) => (
                            <tr key={p.name} className="hover:bg-slate-850/20 transition-all">
                              <td className="py-2.5 font-bold text-slate-200 flex items-center gap-2">
                                <span className="text-slate-500 font-mono w-4">#{idx+1}</span>
                                {p.name}
                              </td>
                              <td className="py-2.5 text-center text-cyan-400 font-bold font-mono">{p.assignedCount}</td>
                              <td className="py-2.5 text-center text-emerald-400 font-bold font-mono">{p.completedCount}</td>
                              <td className="py-2.5 text-center text-rose-400 font-bold font-mono">{p.storingCount}</td>
                              <td className="py-2.5 text-center text-indigo-400 font-bold font-mono">{p.tireCount}</td>
                              <td className="py-2.5 text-right font-black text-white font-mono bg-cyan-500/5 px-2 rounded-lg">{p.score}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>

                  {/* Overdue/Near PM List */}
                  <div className="bg-slate-900/60 rounded-2xl border border-slate-800 p-5 space-y-4">
                    <h3 className="text-sm font-black text-white flex items-center gap-2">
                      <AlertCircle className="w-4 h-4 text-rose-500" /> Peringatan Servis Berkala Mendesak
                    </h3>

                    <div className="space-y-3">
                      {vehiclesPM.filter(v => v.currentKM >= v.nextPMTarget || (v.nextPMTarget - v.currentKM) <= 2000).map(v => {
                        const sisa = v.nextPMTarget - v.currentKM;
                        const isOverdue = sisa <= 0;
                        return (
                          <div key={v.noBody} className={`p-3.5 rounded-xl border flex items-center justify-between text-xs ${
                            isOverdue ? 'bg-red-955/20 border-red-500/30' : 'bg-amber-955/20 border-amber-500/20'
                          }`}>
                            <div className="space-y-0.5">
                              <span className="font-extrabold text-slate-100">Armada {v.noBody} &bull; <span className="font-medium text-slate-400">{v.model}</span></span>
                              <div className="text-slate-400 font-mono text-[11px]">Odo: {v.currentKM.toLocaleString()} / Target: {v.nextPMTarget.toLocaleString()} KM</div>
                            </div>
                            
                            <div className="text-right">
                              <span className={`font-black font-mono block ${isOverdue ? 'text-red-400 animate-pulse' : 'text-rose-400'}`}>
                                {isOverdue ? `Lewat ${Math.abs(sisa).toLocaleString()} KM` : `Sisa ${sisa.toLocaleString()} KM`}
                              </span>
                              <span className="text-[10px] text-slate-500 uppercase block font-extrabold">STATUS SERVIS</span>
                            </div>
                          </div>
                        );
                      })}

                      {vehiclesPM.filter(v => v.currentKM >= v.nextPMTarget || (v.nextPMTarget - v.currentKM) <= 2000).length === 0 && (
                        <p className="text-slate-500 text-xs italic text-center py-4">Semua unit bus dalam siklus preventive maintenance yang aman.</p>
                      )}
                    </div>
                  </div>
                </div>

                <div className="space-y-6">
                  {/* Visual WO Distribution */}
                  <div className="bg-slate-900/60 rounded-2xl border border-slate-800 p-5 space-y-4">
                    <h3 className="text-sm font-black text-white flex items-center gap-2">
                      <Layers className="w-4 h-4 text-cyan-400" /> Distribusi Status Work Order
                    </h3>

                    <div className="space-y-3.5 text-xs">
                      <div>
                        <div className="flex justify-between text-slate-400 mb-1">
                          <span>Antrean Menunggu Tindakan (Pending)</span>
                          <span className="font-bold text-amber-400">{stats.pending} WO</span>
                        </div>
                        <div className="w-full bg-slate-950 h-2 rounded-full overflow-hidden border border-slate-850">
                          <div className="h-full bg-amber-500" style={{ width: `${stats.total > 0 ? (stats.pending / stats.total) * 100 : 0}%` }}></div>
                        </div>
                      </div>

                      <div>
                        <div className="flex justify-between text-slate-400 mb-1">
                          <span>Sedang Dikerjakan Mekanik (Aktif)</span>
                          <span className="font-bold text-cyan-400">{stats.aktif} WO</span>
                        </div>
                        <div className="w-full bg-slate-950 h-2 rounded-full overflow-hidden border border-slate-850">
                          <div className="h-full bg-cyan-500" style={{ width: `${stats.total > 0 ? (stats.aktif / stats.total) * 100 : 0}%` }}></div>
                        </div>
                      </div>

                      <div>
                        <div className="flex justify-between text-slate-400 mb-1">
                          <span>Menunggu Approval Selesai Kerja</span>
                          <span className="font-bold text-indigo-400">{stats.waiting} WO</span>
                        </div>
                        <div className="w-full bg-slate-950 h-2 rounded-full overflow-hidden border border-slate-850">
                          <div className="h-full bg-indigo-500" style={{ width: `${stats.total > 0 ? (stats.waiting / stats.total) * 100 : 0}%` }}></div>
                        </div>
                      </div>

                      <div>
                        <div className="flex justify-between text-slate-400 mb-1">
                          <span>Pekerjaan Selesai & Disetujui (Approved)</span>
                          <span className="font-bold text-emerald-400">{stats.approved} WO</span>
                        </div>
                        <div className="w-full bg-slate-950 h-2 rounded-full overflow-hidden border border-slate-850">
                          <div className="h-full bg-emerald-500" style={{ width: `${stats.total > 0 ? (stats.approved / stats.total) * 100 : 0}%` }}></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Suku Cadang Kritis */}
                  <div className="bg-slate-900/60 rounded-2xl border border-slate-800 p-5 space-y-4">
                    <h3 className="text-sm font-black text-white flex items-center gap-2">
                      <ShieldAlert className="w-4 h-4 text-amber-500 animate-pulse" /> Suku Cadang di Bawah Batas Minimum
                    </h3>

                    <div className="space-y-3">
                      {stats.lowStockParts.map(p => (
                        <div key={p.kode} className="flex justify-between items-center p-2.5 bg-slate-950 rounded-xl border border-slate-855 text-xs font-mono">
                          <div>
                            <span className="font-bold text-slate-300 block">{p.nama}</span>
                            <span className="text-[10px] text-slate-500 uppercase font-extrabold">{p.kode}</span>
                          </div>
                          <div className="text-right">
                            <span className="text-rose-400 font-black block text-sm">{p.qty} sisa</span>
                            <span className="text-[10px] text-slate-500 uppercase font-bold">Safety Limit: {p.minQty}</span>
                          </div>
                        </div>
                      ))}

                      {stats.lowStockCount === 0 && (
                        <p className="text-slate-500 text-xs italic text-center py-4">Ketersediaan logistik suku cadang aman terkendali.</p>
                      )}
                    </div>
                  </div>
                </div>

              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: INPUT INSPEKSI BARU (CHECKER ONLY)            */}
          {/* ================================================== */}
          {activeTab === 'checker_form' && currentRole === 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div className="p-6 bg-indigo-955/20 rounded-2xl border border-indigo-500/10">
                <h2 className="text-xl font-black text-white">Formulir Inspeksi Harian Armada</h2>
                <p className="text-slate-400 text-sm mt-1 font-semibold text-indigo-400 flex items-center gap-1.5">
                  <ClipboardCheck className="w-4 h-4" /> Pemeriksa: {currentUserName} &bull; Catat kondisi aktual dan odometer bus sebelum beroperasi.
                </p>
              </div>

              <div className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 space-y-6">
                <form onSubmit={handleCreateWO} className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Nomor Body Bus</label>
                      <input name="noBody" type="text" list="fleet-bus-list" placeholder="Contoh: TSW 001" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-indigo-500 font-mono" required />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">KM Kendaraan (Odometer)</label>
                      <input name="kmMasuk" type="number" placeholder="Contoh: 45000" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-indigo-500" required />
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Detail Temuan Kerusakan / Keluhan (Kosongkan jika Armada Normal/Prima)</label>
                    <textarea name="keluhan" rows="3" placeholder="Sebutkan kendala jika ada (AC bocor, rem decit, getaran mesin keras)..." className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-sm text-white focus:outline-none focus:border-indigo-500"></textarea>
                  </div>

                  <div>
                    <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Skala Prioritas Temuan</label>
                    <select name="prioritas" className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2.5 text-sm text-white focus:outline-none focus:border-indigo-500">
                      <option value="Rendah">Rendah (Dapat Diperbaiki Bertahap)</option>
                      <option value="Sedang">Sedang (Perlu Diselesaikan Hari Ini)</option>
                      <option value="Tinggi">Tinggi (Mendesak / Breakdown)</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Foto Bukti Kerusakan / Kondisi Fisik</label>
                    <div className="flex gap-3 items-center">
                      <label className="flex-1 flex items-center justify-center gap-2 bg-slate-950 border border-slate-800 hover:border-indigo-500 rounded-xl py-3 px-3 text-xs text-slate-400 hover:text-white cursor-pointer transition-all">
                        <Camera className="w-4 h-4 text-indigo-400" />
                        <span>{tempBase64Image ? "Ganti Foto" : "Unggah Bukti Visual (Opsional)"}</span>
                        <input type="file" accept="image/*" onChange={(e) => handleFileChange(e, setTempBase64Image)} className="hidden" />
                      </label>
                      {tempBase64Image && (
                        <div className="relative">
                          <img src={tempBase64Image} alt="Bukti" className="w-12 h-12 object-cover rounded-xl border border-slate-800" />
                          <button type="button" onClick={() => setTempBase64Image('')} className="absolute -top-1.5 -right-1.5 bg-red-600 text-white rounded-full w-5 h-5 text-[10px] font-bold flex items-center justify-center">&times;</button>
                        </div>
                      )}
                    </div>
                  </div>

                  <button type="submit" className="w-full bg-indigo-500 hover:bg-indigo-400 text-white font-black py-3.5 rounded-xl transition-all shadow-lg text-sm mt-4">
                    Kirim & Simpan Hasil Inspeksi
                  </button>
                </form>
              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: LOG INSPEKSI SAYA (CHECKER ONLY)              */}
          {/* ================================================== */}
          {activeTab === 'checker_history' && currentRole === 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div>
                <h2 className="text-xl font-black text-white">Log Hasil Inspeksi Saya</h2>
                <p className="text-slate-400 text-sm">Daftar riwayat pemeriksaan armada bus yang telah Anda input.</p>
              </div>

              <div className="space-y-4">
                {inspectionLogs.length === 0 ? (
                  <p className="text-center py-12 text-slate-500 text-sm">Belum ada riwayat inspeksi yang dicatat hari ini.</p>
                ) : (
                  inspectionLogs.filter(log => log.checker === currentUserName).map(log => (
                    <div key={log.id} className="bg-slate-900/60 p-5 rounded-2xl border border-slate-800 space-y-3 animate-scale-up">
                      <div className="flex justify-between items-center pb-2 border-b border-slate-800/60">
                        <div className="flex items-center gap-2">
                          <span className="font-bold text-white text-xs">{log.id}</span>
                          <span className="bg-indigo-500/10 text-indigo-400 font-mono px-2 py-0.5 rounded text-[10px] border border-indigo-500/20">
                            Armada {log.noBody}
                          </span>
                        </div>
                        <span className={`text-[9px] font-bold px-2 py-0.5 rounded border ${
                          log.status === 'Armada Prima / Siap Dinas' 
                            ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' 
                            : 'bg-amber-500/10 text-amber-400 border-amber-500/20'
                        }`}>
                          {log.status}
                        </span>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                        <div>
                          <span className="text-slate-500 block mb-1">Odometer / KM:</span>
                          <p className="text-slate-200 font-bold">{log.kmMasuk.toLocaleString()} KM</p>
                          
                          <span className="text-slate-500 block mt-3 mb-1">Temuan Kerusakan:</span>
                          <p className="text-slate-300 font-medium italic">&ldquo;{log.keluhan}&rdquo;</p>
                          
                          <span className="text-slate-500 block mt-3">Skala Prioritas:</span>
                          <p className="text-slate-300 font-bold">{log.prioritas}</p>
                        </div>

                        {log.fotoBefore && (
                          <div>
                            <span className="text-slate-500 block mb-1">Foto Bukti Fisik:</span>
                            <img 
                              src={log.fotoBefore} 
                              alt="Visual" 
                              onClick={() => setZoomImgUrl(log.fotoBefore)}
                              className="w-full h-24 object-cover rounded-xl border border-slate-800 cursor-zoom-in hover:opacity-90" 
                            />
                          </div>
                        )}
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: PEKERJAAN AKTIF MEKANIK (MECHANIC ONLY)       */}
          {/* ================================================== */}
          {activeTab === 'mechanic_tasks' && currentRole === 'mechanic' && (
            <div className="space-y-6 animate-fade-in">
              <div className="p-6 bg-emerald-955/20 rounded-2xl border border-emerald-500/10">
                <h2 className="text-xl font-black text-white">Workspace Perbaikan Mekanik: {currentUserName}</h2>
                <p className="text-slate-400 text-sm mt-1 font-semibold text-emerald-400 flex items-center gap-1.5">
                  <Activity className="w-4 h-4" /> Shift Aktif Anda. Selesaikan tugas bengkel & emergency storing di bawah ini.
                </p>
              </div>

              {/* NAVIGASI SUB-TAB MEKANIK */}
              <div className="flex gap-3 bg-slate-900 p-1.5 rounded-xl border border-slate-800">
                <button
                  onClick={() => setMechanicSubTab('tugas')}
                  className={`flex-1 py-3 px-4 rounded-lg font-bold text-sm flex items-center justify-center gap-2 transition-all ${
                    mechanicSubTab === 'tugas' 
                      ? 'bg-emerald-500 text-slate-950 shadow-lg' 
                      : 'text-slate-400 hover:text-white hover:bg-slate-850'
                  }`}
                >
                  <ClipboardCheck className="w-4 h-4" /> Daftar Tugas Aktif ({myMechanicJobs.length + myMechanicStoringJobs.length})
                </button>
                <button
                  onClick={() => setMechanicSubTab('lapor')}
                  className={`flex-1 py-3 px-4 rounded-lg font-bold text-sm flex items-center justify-center gap-2 transition-all ${
                    mechanicSubTab === 'lapor' 
                      ? 'bg-cyan-500 text-slate-950 shadow-lg' 
                      : 'text-slate-400 hover:text-white hover:bg-slate-850'
                  }`}
                >
                  <PlusCircle className="w-4 h-4" /> Lapor Temuan Mandiri (Ad-hoc)
                </button>
              </div>

              {mechanicSubTab === 'tugas' ? (
                <>
                  {/* EMERGENCY ROAD RESCUE UNTUK MEKANIK */}
                  {myMechanicStoringJobs.length > 0 && (
                    <div className="space-y-4">
                      <h3 className="text-sm font-extrabold text-rose-400 flex items-center gap-2">
                        <AlertCircle className="w-5 h-5 animate-bounce" /> 🚨 TUGAS EMERGENCY ROAD SERVICE (STORING JALAN)
                      </h3>
                      
                      <div className="grid grid-cols-1 gap-4">
                        {myMechanicStoringJobs.map(st => (
                          <div key={st.id} className="bg-slate-900 border-2 border-rose-500/30 p-6 rounded-2xl space-y-4">
                            <div className="flex justify-between items-start">
                              <div>
                                <span className="bg-rose-500/15 text-rose-400 border border-rose-500/20 text-[10px] font-bold px-2 py-0.5 rounded uppercase">
                                  DITUGASKAN - OTW TKP
                                </span>
                                <h4 className="text-lg font-black text-white mt-1.5">{st.id} &bull; Bus {st.noBody}</h4>
                              </div>
                              <span className="text-xs text-slate-500 font-mono">Waktu Keluar: {st.jamMulai.replace('T', ' ')}</span>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                              <div className="bg-slate-950 p-3.5 rounded-xl border border-slate-850 space-y-1">
                                <span className="text-[10px] text-slate-500 font-bold block">LOKASI DARURAT:</span>
                                <span className="text-slate-100 font-bold flex items-center gap-1">
                                  <MapPin className="w-4 h-4 text-rose-500" /> {st.lokasi}
                                </span>
                              </div>
                              <div className="bg-slate-950 p-3.5 rounded-xl border border-slate-850 space-y-1">
                                <span className="text-[10px] text-slate-500 font-bold block">KENDALA AWAL DILAPORKAN PRAMUDI:</span>
                                <span className="text-slate-300 italic font-medium">&ldquo;{st.kendala}&rdquo;</span>
                              </div>
                            </div>

                            <form onSubmit={(e) => handleCompleteStoringByMechanic(e, st.id)} className="bg-slate-955/60 p-4 rounded-xl border border-slate-850 space-y-3.5">
                              <h5 className="text-xs font-bold text-cyan-400">Laporan Penyelesaian TKP (Isi Saat Masalah Teratasi)</h5>
                              
                              <div>
                                <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Tindakan Penanganan Emergency Teknis</label>
                                <textarea 
                                  name="tindakan" 
                                  rows="2" 
                                  placeholder="Contoh: Mengganti hose radiator bocor dengan cadangan, pengisian air coolant kembali..." 
                                  className="w-full bg-slate-900 border border-slate-800 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-cyan-500"
                                  required
                                ></textarea>
                              </div>

                              <div className="flex flex-col sm:flex-row gap-3 items-end">
                                <div className="flex-1">
                                  <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Foto Hasil Perbaikan Lapangan (Wajib)</label>
                                  <div className="flex gap-2">
                                    <label className="flex-1 flex items-center justify-center gap-1.5 bg-slate-900 border border-slate-800 hover:border-cyan-500 rounded-lg py-2 px-3 text-[11px] text-slate-400 cursor-pointer">
                                      <Camera className="w-4 h-4 text-cyan-400" />
                                      <span>{tempBase64Image ? "Foto Siap" : "Unggah Foto TKP"}</span>
                                      <input 
                                        type="file" 
                                        accept="image/*" 
                                        onChange={(e) => handleFileChange(e, setTempBase64Image)} 
                                        className="hidden" 
                                      />
                                    </label>
                                    {tempBase64Image && (
                                      <img src={tempBase64Image} alt="Preview Storing" className="w-10 h-10 object-cover rounded border border-slate-800" />
                                    )}
                                  </div>
                                </div>

                                <button 
                                  type="submit" 
                                  className="w-full sm:w-auto bg-rose-600 hover:bg-rose-500 text-white font-extrabold px-6 py-2.5 rounded-lg text-xs transition-all flex items-center justify-center gap-1.5"
                                >
                                  <CheckCircle className="w-4 h-4" /> Selesaikan Storing
                                </button>
                              </div>
                            </form>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* TUGAS WORKSHOP BIASA MEKANIK */}
                  <div className="space-y-4">
                    <h3 className="text-sm font-extrabold text-cyan-400 flex items-center gap-2">
                      <Wrench className="w-5 h-5" /> TUGAS PERBAIKAN DI BAY BENGKEL
                    </h3>

                    <div className="grid grid-cols-1 gap-6">
                      {myMechanicJobs.map(wo => (
                        <div key={wo.id} className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 grid grid-cols-1 lg:grid-cols-3 gap-6">
                          
                          <div className="space-y-4">
                            <div>
                              <span className="text-[10px] text-slate-500 font-bold uppercase tracking-wider block">Identitas Tiket</span>
                              <h3 className="text-lg font-black text-white mt-1">{wo.id} &bull; Body {wo.noBody}</h3>
                              <p className="text-xs text-slate-400 mt-1">KM Masuk: {wo.kmMasuk.toLocaleString()} KM</p>
                            </div>

                            <div className="bg-slate-950 p-3 rounded-xl border border-slate-855 font-semibold">
                              <span className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Aduan / Temuan</span>
                              <p className="text-xs text-slate-300 italic">&ldquo;{wo.keluhan}&rdquo;</p>
                            </div>

                            {wo.fotoBefore && (
                              <div>
                                <span className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Visual Damage</span>
                                <img 
                                  src={wo.fotoBefore} 
                                  alt="Damage" 
                                  onClick={() => setZoomImgUrl(wo.fotoBefore)}
                                  className="w-full h-32 object-cover rounded-xl border border-slate-800 cursor-zoom-in hover:opacity-90" 
                                />
                              </div>
                            )}
                          </div>

                          <div className="space-y-4">
                            <div>
                              <span className="text-[10px] text-slate-500 font-bold uppercase block">Instruksi Leader</span>
                              <p className="text-xs text-amber-300 font-semibold mt-1">{wo.leaderNotes || "Lakukan penelusuran menyeluruh."}</p>
                            </div>

                            <div className="bg-slate-950 p-3 rounded-xl border border-slate-850">
                              <span className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Status Suku Cadang</span>
                              <span className="text-[11px] text-slate-400 font-medium">Gunakan form di sebelah kanan jika memerlukan penggantian bagian.</span>
                            </div>
                          </div>

                          <div className="bg-slate-955 p-4 rounded-xl border border-slate-850 space-y-4">
                            <h4 className="text-xs font-bold text-emerald-400 flex items-center gap-1.5 uppercase">
                              <CheckCircle className="w-4 h-4" /> Form Selesai Kerja
                            </h4>

                            <form onSubmit={(e) => handleCompleteRepair(e, wo.id)} className="space-y-3">
                              <div>
                                <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Tindakan Teknis Yang Dilakukan</label>
                                <textarea 
                                  name="tindakan" 
                                  placeholder="Tulis detail tindakan perbaikan mekanikal..." 
                                  rows="2"
                                  className="w-full bg-slate-900 border border-slate-800 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-emerald-500"
                                  required
                                ></textarea>
                              </div>

                              <div className="grid grid-cols-2 gap-2">
                                <div>
                                  <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Part Dipakai</label>
                                  <select name="partCode" className="w-full bg-slate-900 border border-slate-800 rounded-lg p-1.5 text-[10px] text-white focus:outline-none">
                                    <option value="">Tanpa Suku Cadang</option>
                                    {spareparts.map(p => (
                                      <option key={p.kode} value={p.kode}>{p.nama} ({p.qty} sisa)</option>
                                    ))}
                                  </select>
                                </div>
                                <div>
                                  <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Qty Pakai</label>
                                  <input 
                                    name="partQty" 
                                    type="number" 
                                    min="1" 
                                    placeholder="Qty" 
                                    className="w-full bg-slate-900 border border-slate-800 rounded-lg p-1.5 text-[10px] text-white focus:outline-none"
                                  />
                                </div>
                              </div>

                              <div>
                                <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Foto Hasil Perbaikan (Setelah)</label>
                                <div className="flex gap-2">
                                  <label className="flex-1 flex items-center justify-center gap-1 bg-slate-900 border border-slate-800 hover:border-emerald-500 rounded-lg py-1.5 px-2 text-[10px] text-slate-400 cursor-pointer">
                                    <Upload className="w-3.5 h-3.5 text-emerald-400" />
                                    <span>{tempBase64ImageAfter ? "Selesai" : "Unggah"}</span>
                                    <input 
                                      type="file" 
                                      accept="image/*" 
                                      onChange={(e) => handleFileChange(e, setTempBase64ImageAfter)} 
                                      className="hidden" 
                                    />
                                  </label>
                                  {tempBase64ImageAfter && (
                                    <img src={tempBase64ImageAfter} alt="Preview After" className="w-8 h-8 object-cover rounded border border-slate-800" />
                                  )}
                                </div>
                              </div>

                              <button 
                                type="submit" 
                                className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-extrabold py-2 rounded-lg text-xs transition-all"
                              >
                                Kirim & Minta Verifikasi Selesai
                              </button>
                            </form>
                          </div>

                        </div>
                      ))}

                      {myMechanicJobs.length === 0 && myMechanicStoringJobs.length === 0 && (
                        <p className="text-center py-12 text-slate-500 text-sm">Tidak ada pekerjaan aktif yang ditugaskan kepada Anda saat ini.</p>
                      )}
                    </div>
                  </div>
                </>
              ) : (
                <div className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 space-y-6 animate-scale-up">
                  <div className="border-b border-slate-800 pb-4">
                    <h3 className="text-lg font-black text-cyan-400 flex items-center gap-2">
                      <AlertTriangle className="w-5 h-5" /> Catat Temuan Kerusakan Spontan
                    </h3>
                    <p className="text-slate-400 text-xs mt-1">Formulir laporan ini akan menghasilkan WO berawalan <span className="font-mono text-cyan-300">WO-M-xxxx</span> and otomatis memotong stok gudang jika ada komponen yang digunakan.</p>
                  </div>

                  <form onSubmit={handleSelfReportSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Nomor Body Bus</label>
                        <input name="noBody" type="text" list="fleet-bus-list" placeholder="Contoh: TSW 001" className="w-full bg-slate-955 border border-slate-800 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-cyan-500 font-mono" required />
                      </div>
                      <div>
                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">KM Kendaraan (Odometer)</label>
                        <input name="kmMasuk" type="number" placeholder="Contoh: 45000" className="w-full bg-slate-955 border border-slate-800 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-cyan-500" />
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Detail Temuan & Tindakan Perbaikan</label>
                      <textarea name="keluhan" rows="3" placeholder="Sebutkan kerusakan yang ditemukan dan tindakan yang langsung diambil..." className="w-full bg-slate-955 border border-slate-800 rounded-xl p-3 text-sm text-white focus:outline-none focus:border-cyan-500" required></textarea>
                    </div>

                    <div className="bg-slate-955 p-4 rounded-xl border border-slate-855 space-y-3">
                      <h4 className="text-xs font-bold text-emerald-400 flex items-center gap-2 uppercase tracking-wider">
                        <Package className="w-4 h-4" /> Pemakaian Suku Cadang Gudang
                      </h4>
                      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <div className="col-span-2">
                          <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Pilih Komponen</label>
                          <select name="partCode" className="w-full bg-slate-900 border border-slate-800 rounded-lg p-2.5 text-xs text-white focus:outline-none focus:border-cyan-500">
                            <option value="">-- Tanpa Suku Cadang --</option>
                            {spareparts.map(p => (
                              <option key={p.kode} value={p.kode} disabled={p.qty <= 0}>
                                {p.nama} (Sisa: {p.qty} {p.unit}) {p.qty <= 0 ? '- HABIS' : ''}
                              </option>
                            ))}
                          </select>
                        </div>
                        <div>
                          <label className="block text-[10px] text-slate-500 font-bold uppercase mb-1">Qty Pakai</label>
                          <input name="partQty" type="number" min="1" placeholder="Jumlah" className="w-full bg-slate-900 border border-slate-800 rounded-lg p-2.5 text-xs text-white focus:outline-none focus:border-cyan-500" />
                        </div>
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Foto Bukti Perbaikan</label>
                      <div className="flex gap-3 items-center">
                        <label className="flex-1 flex items-center justify-center gap-2 bg-slate-955 border border-slate-800 hover:border-cyan-500 rounded-xl py-3 px-3 text-xs text-slate-400 hover:text-white cursor-pointer transition-all">
                          <Camera className="w-4 h-4 text-cyan-400" />
                          <span>{tempBase64Image ? "Ubah Foto" : "Unggah Bukti (Opsional)"}</span>
                          <input type="file" accept="image/*" onChange={(e) => handleFileChange(e, setTempBase64Image)} className="hidden" />
                        </label>
                        {tempBase64Image && (
                          <div className="relative">
                            <img src={tempBase64Image} alt="Bukti" className="w-12 h-12 object-cover rounded-xl border border-slate-800" />
                            <button type="button" onClick={() => setTempBase64Image('')} className="absolute -top-1.5 -right-1.5 bg-red-600 text-white rounded-full w-5 h-5 text-[10px] font-bold flex items-center justify-center">&times;</button>
                          </div>
                        )}
                      </div>
                    </div>

                    <button type="submit" className="w-full bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black py-3.5 rounded-xl transition-all shadow-lg text-sm mt-4">
                      Kirim Laporan Spontan ke Leader (Pending Approval)
                    </button>
                  </form>
                </div>
              )}
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: SEMUA WORK ORDERS                             */}
          {/* ================================================== */}
          {activeTab === 'workorders' && currentRole !== 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                  <h2 className="text-xl font-black text-white">Semua Histori & Antrean Work Orders (WO)</h2>
                  <p className="text-slate-400 text-sm">Review dan monitoring seluruh aduan yang masuk ke dalam sistem.</p>
                </div>

                <div className="w-full md:w-80 relative">
                  <Search className="w-4 h-4 text-slate-500 absolute left-3 top-3.5" />
                  <input 
                    type="text" 
                    placeholder="Cari No Body, Keluhan, ID WO..." 
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-9 pr-4 py-2.5 text-xs text-white focus:outline-none focus:border-cyan-500 font-semibold"
                  />
                </div>
              </div>

              <div className="space-y-4">
                {filteredWorkOrders.map(wo => (
                  <div key={wo.id} className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 space-y-4 animate-scale-up">
                    <div className="flex flex-wrap justify-between items-center gap-3 pb-3 border-b border-slate-800/60">
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-black text-white">{wo.id}</span>
                        <span className="bg-slate-950 text-cyan-400 px-2 py-0.5 rounded font-mono font-bold text-[11px] border border-slate-855">
                          Body: {wo.noBody}
                        </span>
                        <span className="text-slate-500 text-xs hidden sm:inline">|</span>
                        <span className="text-xs text-slate-400">KM: <strong>{wo.kmMasuk.toLocaleString()}</strong></span>
                      </div>

                      <div className="flex items-center gap-2">
                        <span className={`text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-full ${
                          wo.prioritas === 'Tinggi' ? 'bg-red-550/10 text-red-400 border border-red-500/20' : 'bg-slate-800 text-slate-400'
                        }`}>
                          Prioritas {wo.prioritas}
                        </span>

                        <span className={`text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-full ${
                          wo.status === 'Pending' ? 'bg-amber-500/15 text-amber-400 border border-amber-500/20 animate-pulse' :
                          wo.status === 'Aktif' ? 'bg-cyan-500/15 text-cyan-400 border border-cyan-500/20' :
                          wo.status === 'Menunggu Approval' ? 'bg-indigo-500/15 text-indigo-400 border-indigo-500/20' :
                          'bg-emerald-500/15 text-emerald-400 border-emerald-500/20'
                        }`}>
                          {wo.status}
                        </span>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 text-xs">
                      <div className="space-y-3">
                        <div>
                          <span className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Aduan Masuk</span>
                          <p className="text-slate-200 bg-slate-955 p-3 rounded-xl border border-slate-850 italic font-medium">
                            &ldquo;{wo.keluhan}&rdquo;
                          </p>
                        </div>
                        <div className="text-slate-500">
                          Checker: <strong className="text-slate-400">{wo.checker}</strong> &bull; {wo.tanggal}
                        </div>
                        {wo.fotoBefore && (
                          <div className="space-y-1">
                            <span className="text-[10px] text-slate-500 font-bold uppercase block">Foto Kerusakan (Before)</span>
                            <img 
                              src={wo.fotoBefore} 
                              alt="Before" 
                              onClick={() => setZoomImgUrl(wo.fotoBefore)}
                              className="w-full h-24 object-cover rounded-xl border border-slate-800 cursor-zoom-in hover:opacity-90" 
                            />
                          </div>
                        )}
                      </div>

                      <div className="space-y-3">
                        <span className="text-[10px] text-slate-500 font-bold uppercase block">Tim Pelaksana</span>
                        <div className="bg-slate-950 p-3 rounded-xl border border-slate-850 space-y-1.5">
                          <p>Mekanik: <strong className="text-emerald-400">{wo.mekanik.join(', ') || 'Belum Ditunjuk'}</strong></p>
                          {wo.durasi > 0 && <p>Durasi Kerja: <strong className="text-cyan-400">{wo.durasi} Menit</strong></p>}
                          {wo.leaderNotes && <p>Instruksi: <span className="text-slate-300 font-semibold">{wo.leaderNotes}</span></p>}
                        </div>

                        {wo.tindakan && (
                          <div className="bg-slate-950/40 p-3 rounded-xl border border-slate-850">
                            <span className="font-bold text-slate-300 block mb-1">Tindakan Teknis Mekanik:</span>
                            <p className="text-slate-400 italic font-medium">{wo.tindakan}</p>
                          </div>
                        )}
                      </div>

                      <div className="space-y-3">
                        <span className="text-[10px] text-slate-500 font-bold uppercase block">Suku Cadang Digunakan</span>
                        {wo.sparepart.length > 0 ? (
                          <div className="bg-slate-950 p-3 rounded-xl border border-slate-850 space-y-1">
                            {wo.sparepart.map(p => (
                              <div key={p.kode} className="flex justify-between font-mono">
                                <span>{p.nama}</span>
                                <span className="text-cyan-400 font-bold">x{p.qty}</span>
                              </div>
                            ))}
                          </div>
                        ) : (
                          <p className="text-slate-500 italic font-medium">Tanpa suku cadang tambahan.</p>
                        )}

                        {wo.fotoAfter && (
                          <div className="space-y-1">
                            <span className="text-[10px] text-slate-500 font-bold uppercase block">Foto Hasil Kerja (After)</span>
                            <img 
                              src={wo.fotoAfter} 
                              alt="After" 
                              onClick={() => setZoomImgUrl(wo.fotoAfter)}
                              className="w-full h-24 object-cover rounded-xl border border-slate-800 cursor-zoom-in hover:opacity-90" 
                            />
                          </div>
                        )}

                        {currentRole === 'leader' && wo.status === 'Pending' && (
                          <div className="flex gap-2 pt-2">
                            <button 
                              onClick={() => setLeaderAssignWO(wo)}
                              className="flex-1 bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black py-2 rounded-xl text-xs"
                            >
                              Approve & Tugaskan
                            </button>
                            <button 
                              onClick={() => handleRejectWO(wo.id)}
                              className="bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 font-bold py-2 px-3 rounded-xl text-xs"
                            >
                              Reject
                            </button>
                          </div>
                        )}

                        {currentRole === 'leader' && wo.status === 'Menunggu Approval' && (
                          <button 
                            onClick={() => handleApproveCompletion(wo.id)}
                            className="w-full bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-black py-2 rounded-xl text-xs"
                          >
                            Setujui Pekerjaan Selesai
                          </button>
                        )}
                      </div>

                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: MONITORING PM BERKALA 10.000 KM               */}
          {/* ================================================== */}
          {activeTab === 'preventive' && currentRole !== 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div>
                <h2 className="text-xl font-black text-white">Preventive Maintenance (PM) Berkala</h2>
                <p className="text-slate-400 text-sm">Sistem alert otomatis servis berkala setiap interval 10.000 Kilometer armada.</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {vehiclesPM.map(v => {
                  const sisaKM = v.nextPMTarget - v.currentKM;
                  const ratio = Math.max(0, Math.min(100, ((10000 - sisaKM) / 10000) * 100));
                  
                  let barColor = "from-emerald-500 to-teal-500";
                  let borderClass = "border-slate-800 bg-slate-900/60";
                  let badgeText = "Aman / Safe";
                  let badgeColor = "bg-emerald-500/10 text-emerald-400 border-emerald-500/20";

                  if (sisaKM <= 0) {
                    barColor = "from-red-500 to-rose-600 animate-pulse";
                    borderClass = "border-red-500/30 bg-red-955/10";
                    badgeText = "Overdue Servis";
                    badgeColor = "bg-red-500/20 text-red-400 border-red-500/30 animate-pulse";
                  } else if (sisaKM <= 2000) {
                    barColor = "from-amber-500 to-yellow-500";
                    borderClass = "border-amber-500/25 bg-amber-955/10";
                    badgeText = "Mendekati PM";
                    badgeColor = "bg-amber-500/10 text-amber-400 border-amber-500/20";
                  }

                  return (
                    <div key={v.noBody} className={`p-5 rounded-2xl border flex flex-col justify-between ${borderClass} animate-scale-up`}>
                      <div>
                        <div className="flex justify-between items-start">
                          <div>
                            <span className="text-[10px] text-slate-500 font-mono block">{v.model}</span>
                            <h3 className="text-base font-black text-white mt-0.5">TJ Body {v.noBody}</h3>
                          </div>
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded border uppercase ${badgeColor}`}>
                            {badgeText}
                          </span>
                        </div>

                        <div className="grid grid-cols-2 gap-2 my-4 bg-slate-950 p-3 rounded-xl border border-slate-855 text-xs font-mono">
                          <div>
                            <span className="text-slate-500 block">Km Sekarang</span>
                            <span className="text-sm font-bold text-slate-100">{v.currentKM.toLocaleString()} KM</span>
                          </div>
                          <div>
                            <span className="text-slate-500 block">Target PM</span>
                            <span className="text-sm font-bold text-cyan-400">{v.nextPMTarget.toLocaleString()} KM</span>
                          </div>
                        </div>

                        <div className="space-y-1 text-xs">
                          <div className="flex justify-between">
                            <span className="text-slate-400">Sisa Jarak Tempuh</span>
                            <span className="font-bold text-slate-100">
                              {sisaKM > 0 ? `${sisaKM.toLocaleString()} KM` : `${Math.abs(sisaKM).toLocaleString()} KM OVERDUE`}
                            </span>
                          </div>
                          <div className="w-full bg-slate-950 h-2.5 rounded-full overflow-hidden border border-slate-855">
                            <div 
                              className={`h-full bg-gradient-to-r ${barColor}`} 
                              style={{ width: `${sisaKM <= 0 ? 100 : ratio}%` }}
                            />
                          </div>
                        </div>
                      </div>

                      {(currentRole === 'leader' || currentRole === 'admin') && (
                        <button 
                          onClick={() => handleResetPMInterval(v.noBody)}
                          className="w-full mt-5 bg-slate-950 hover:bg-slate-900 text-slate-300 font-bold py-2 rounded-xl text-xs flex items-center justify-center gap-2 border border-slate-855 transition-all"
                        >
                          <RefreshCw className="w-3.5 h-3.5 text-cyan-400" /> Atur Siklus PM Baru (+10.000 KM)
                        </button>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: STORING JALAN (RESCUE EMERGENCY)             */}
          {/* ================================================== */}
          {activeTab === 'storing' && currentRole !== 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div>
                <h2 className="text-xl font-black text-white">Emergency Road Service (Storing Rescue)</h2>
                <p className="text-slate-400 text-sm">Penanganan kerusakan darurat armada di luar area depo secara real-time.</p>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                
                {/* FORM DISPATCH OLEH LEADER */}
                {(currentRole === 'leader' || currentRole === 'admin') ? (
                  <div className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 space-y-4 h-fit">
                    <h3 className="text-sm font-bold text-white flex items-center gap-2">
                      <Truck className="w-5 h-5 text-rose-500 animate-bounce" /> Dispatch Rescue Baru
                    </h3>

                    <form onSubmit={handleAddStoringByLeader} className="space-y-3">
                      <div>
                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Nomor Body Bus</label>
                        <input name="noBody" list="fleet-bus-list" placeholder="Contoh: TSW 045" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-cyan-500 font-semibold font-mono" required />
                      </div>

                      <div>
                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Lokasi Kejadian Darurat</label>
                        <input name="lokasi" placeholder="Contoh: Halte Grogol 2 Arah Pluit" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-cyan-500" required />
                      </div>

                      <div>
                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Gejala Kendala Dilaporkan Driver</label>
                        <textarea name="kendala" rows="2" placeholder="Kompresor bocor, kelistrikan mati..." className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none focus:border-cyan-500" required></textarea>
                      </div>

                      <div className="space-y-2">
                        <label className="block text-xs font-bold text-slate-400 uppercase">Pilih Mekanik Rescue (Bisa Multi-Select)</label>
                        <div className="grid grid-cols-2 gap-2 max-h-36 overflow-y-auto p-2 bg-slate-950 rounded-xl border border-slate-850">
                          {MECHANICS_LIST.map(name => {
                            const isSelected = assignedMeks.includes(name);
                            return (
                              <button
                                key={name}
                                type="button"
                                onClick={() => {
                                  setAssignedMeks(prev => 
                                    prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
                                  );
                                }}
                                className={`p-1.5 rounded-lg text-center text-[11px] font-bold border transition-all ${
                                  isSelected ? 'bg-cyan-500/20 border-cyan-400 text-cyan-300' : 'bg-slate-900 border-slate-855 text-slate-400 hover:text-white'
                                }`}
                              >
                                {name}
                              </button>
                            );
                          })}
                        </div>
                      </div>

                      <button type="submit" className="w-full bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-extrabold py-2.5 rounded-xl text-xs transition-all shadow-lg">
                        Berangkatkan Tim Rescue (OTW)
                      </button>
                    </form>
                  </div>
                ) : (
                  <div className="bg-slate-900/40 p-5 rounded-2xl border border-slate-800 text-center text-slate-500 text-xs h-fit">
                    Modul input penugasan dispatch storing jalan hanya diizinkan untuk Leader dan Admin.
                  </div>
                )}

                {/* HISTORI STORING JALAN */}
                <div className="lg:col-span-2 space-y-4">
                  <h3 className="text-sm font-bold text-white flex items-center gap-2">
                    <Navigation className="w-4 h-4 text-cyan-400" /> Histori Operasi Penyelamatan Jalan
                  </h3>

                  <div className="space-y-4">
                    {storingList.map(s => (
                      <div key={s.id} className="bg-slate-900/60 p-5 rounded-2xl border border-slate-800 space-y-3 animate-scale-up">
                        <div className="flex justify-between items-center pb-2 border-b border-slate-800/60">
                          <span className="font-bold text-white text-xs">{s.id} &bull; TJ Body {s.noBody}</span>
                          <span className={`text-[9px] font-bold px-2 py-0.5 rounded border ${
                            s.status === 'Selesai' 
                              ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' 
                              : 'bg-rose-550/10 text-rose-400 border-rose-500/20 animate-pulse'
                          }`}>
                            {s.status === 'Selesai' ? 'RESCUE SUKSES' : 'DALAM DISPATCH OTW'}
                          </span>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                          <div>
                            <span className="text-slate-500 block mb-1">LOKASI BREAKDOWN:</span>
                            <p className="bg-slate-950 p-2.5 rounded-xl border border-slate-855 font-mono text-slate-200 flex items-center gap-1.5 font-semibold">
                              <MapPin className="w-3.5 h-3.5 text-rose-500" /> {s.lokasi}
                            </p>
                            
                            <span className="text-slate-500 block mt-3 mb-1">KENDALA AWAL DILAPORKAN:</span>
                            <p className="text-slate-300 font-semibold italic">&ldquo;{s.kendala}&rdquo;</p>
                          </div>

                          <div>
                            <span className="text-slate-500 block mb-1">TINDAKAN RECOVERY (OLEH MEKANIK TKP):</span>
                            {s.tindakan ? (
                              <p className="bg-emerald-950/20 text-emerald-300 border border-emerald-500/15 p-2.5 rounded-xl font-mono font-medium">{s.tindakan}</p>
                            ) : (
                              <p className="text-slate-500 italic">Mekanik masih dalam perjalanan menuju lokasi...</p>
                            )}
                            
                            <span className="text-slate-500 block mt-3">MEKANIK PENYELAMAT:</span>
                            <p className="text-cyan-400 font-bold mt-1">{s.mekanik.join(', ')}</p>
                          </div>
                        </div>

                        {s.foto && (
                          <div className="pt-2">
                            <span className="text-[10px] text-slate-500 font-bold block mb-1">Bukti Foto Lokasi Kejadian:</span>
                            <img 
                              src={s.foto} 
                              alt="TKP" 
                              onClick={() => setZoomImgUrl(s.foto)}
                              className="w-full h-32 object-cover rounded-xl border border-slate-855 cursor-zoom-in hover:opacity-90" 
                            />
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>

              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: PENGGANTIAN BAN ARMADA                        */}
          {/* ================================================== */}
          {activeTab === 'tires' && currentRole !== 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div>
                <h2 className="text-xl font-black text-white">Log Penggantian Ban Bus Depo</h2>
                <p className="text-slate-400 text-sm">Pendaftaran penggantian roda bus akan otomatis memotong 1 Pcs stok ban radial di gudang.</p>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                
                <div className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 space-y-4 h-fit">
                  <h3 className="text-sm font-bold text-white flex items-center gap-2">
                    <Disc className="w-4 h-4 text-cyan-400 animate-spin-slow" /> Penggantian Roda Ban Baru
                  </h3>

                  <form onSubmit={handleAddTireSwap} className="space-y-3.5">
                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Nomor Body Bus</label>
                      <input name="noBody" list="fleet-bus-list" placeholder="Contoh: TSW 100" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-cyan-500 font-semibold font-mono" required />
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Posisi Roda</label>
                      <select name="posisi" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-cyan-500">
                        <option value="Roda Depan Kanan">Roda Depan Kanan</option>
                        <option value="Roda Depan Kiri">Roda Depan Kiri</option>
                        <option value="Belakang Kanan Luar">Belakang Kanan Luar</option>
                        <option value="Belakang Kiri Luar">Belakang Kiri Luar</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">KM Mileage Ban Lama</label>
                      <input name="kmBan" type="number" placeholder="Contoh: 85000" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none" required />
                    </div>

                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Barcode Ban Lama</label>
                        <input name="barcodeLama" placeholder="Lama" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-2 py-1.5 text-xs text-white" required />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Barcode Ban Baru</label>
                        <input name="barcodeBaru" placeholder="Baru" className="w-full bg-slate-950 border border-slate-800 rounded-xl px-2 py-1.5 text-xs text-white" required />
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Foto Bukti Barcode Ban Baru</label>
                      <div className="flex gap-2">
                        <label className="flex-1 flex items-center justify-center gap-1 bg-slate-955 border border-slate-800 hover:border-cyan-500 rounded-xl py-2 px-3 text-[11px] text-slate-400 cursor-pointer">
                          <Camera className="w-4 h-4 text-cyan-400" />
                          <span>{tempBase64Image ? "Ready" : "Upload"}</span>
                          <input 
                            type="file" 
                            accept="image/*" 
                            onChange={(e) => handleFileChange(e, setTempBase64Image)} 
                            className="hidden" 
                          />
                        </label>
                        {tempBase64Image && (
                          <img src={tempBase64Image} alt="Ban" className="w-8 h-8 object-cover rounded border border-slate-800" />
                        )}
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label className="block text-xs font-bold text-slate-400 uppercase">Petugas Mekanik</label>
                      <div className="grid grid-cols-2 gap-2 max-h-36 overflow-y-auto p-2 bg-slate-955 rounded-xl border border-slate-850">
                        {MECHANICS_LIST.map(name => {
                          const isSelected = assignedMeks.includes(name);
                          return (
                            <button
                              key={name}
                              type="button"
                              onClick={() => {
                                setAssignedMeks(prev => 
                                  prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
                                );
                              }}
                              className={`p-1.5 rounded-lg text-center text-[11px] font-bold border transition-all ${
                                isSelected ? 'bg-cyan-500/20 border-cyan-400 text-cyan-300' : 'bg-slate-900 border-slate-855 text-slate-400 hover:text-white'
                              }`}
                            >
                              {name}
                            </button>
                          );
                        })}
                      </div>
                    </div>

                    <button type="submit" className="w-full bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-extrabold py-2.5 rounded-xl text-xs transition-all shadow-lg">
                      Log Penggantian & Potong Stok Ban
                    </button>
                  </form>
                </div>

                <div className="lg:col-span-2 space-y-4">
                  <h3 className="text-sm font-bold text-white flex items-center gap-2">
                    <FileText className="w-4 h-4 text-indigo-400" /> Histori Log Ban Depo
                  </h3>

                  <div className="space-y-4">
                    {tireSwaps.map(t => (
                      <div key={t.id} className="bg-slate-900/60 p-5 rounded-2xl border border-slate-800 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-xs animate-scale-up">
                        <div className="space-y-1.5">
                          <div className="flex items-center gap-2">
                            <span className="font-bold text-white text-sm">{t.id}</span>
                            <span className="bg-cyan-500/10 text-cyan-400 font-mono px-2 py-0.5 rounded text-[10px] border border-cyan-500/20">
                              Armada {t.noBody}
                            </span>
                          </div>
                          <p className="text-slate-300 font-bold">Posisi: {t.posisi}</p>
                          <p className="text-slate-500">Masa Pakai Odo Ban: <strong>{t.kmBan.toLocaleString()} KM</strong></p>
                          <div className="flex gap-4 text-[10px]">
                            <span className="text-slate-500">Old: <strong className="text-rose-400">{t.barcodeLama}</strong></span>
                            <span className="text-slate-500">New: <strong className="text-emerald-400">{t.barcodeBaru}</strong></span>
                          </div>
                        </div>

                        <div className="text-right">
                          <span className="text-slate-500 block uppercase font-bold text-[9px]">Swapper Mekanik:</span>
                          <span className="text-cyan-400 font-bold block">{t.mekanik.join(', ')}</span>
                          {t.fotoLama && (
                            <img 
                              src={t.fotoLama} 
                              alt="Barcode" 
                              onClick={() => setZoomImgUrl(t.fotoLama)}
                              className="w-8 h-8 object-cover rounded border border-slate-800 mt-2 ml-auto cursor-zoom-in hover:opacity-90" 
                            />
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: GUDANG SPAREPART INVENTORY                    */}
          {/* ================================================== */}
          {activeTab === 'gudang' && currentRole !== 'checker' && (
            <div className="space-y-6 animate-fade-in">
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                  <h2 className="text-xl font-black text-white">Logistik & Gudang Suku Cadang</h2>
                  <p className="text-slate-400 text-sm">Kelola inventaris suku cadang, update minimum safety stock, restock instan.</p>
                </div>

                {(currentRole === 'admin' || currentRole === 'leader') && (
                  <button 
                    onClick={() => {
                      setNewPartForm({ kode: '', nama: '', qty: '', unit: 'Pcs', minQty: '3' });
                      setIsEditingPart('new');
                      setShowAddPartModal(true);
                    }}
                    className="bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-extrabold px-4 py-2.5 rounded-xl text-xs flex items-center gap-2"
                  >
                    <Plus className="w-4 h-4" /> Daftarkan Sparepart Baru
                  </button>
                )}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {spareparts.map(p => {
                  const isLimit = p.qty <= p.minQty;
                  return (
                    <div key={p.kode} className={`p-5 rounded-2xl border flex justify-between items-center transition-all animate-scale-up ${
                      isLimit ? 'bg-red-955/10 border-red-500/25' : 'bg-slate-900/60 border-slate-800'
                    }`}>
                      <div className="space-y-1.5">
                        <div className="flex items-center gap-2">
                          <span className="bg-slate-950 text-slate-400 font-mono px-2 py-0.5 rounded text-[10px] border border-slate-855">
                            {p.kode}
                          </span>
                          {isLimit && (
                            <span className="bg-red-500/10 text-red-400 text-[9px] font-extrabold px-1.5 py-0.5 rounded uppercase animate-pulse">
                              Stok Kritis
                            </span>
                          )}
                        </div>
                        <h3 className="text-base font-bold text-slate-200">{p.nama}</h3>
                        <p className="text-xs text-slate-500">Minimum Safety: <strong>{p.minQty} {p.unit}</strong></p>
                      </div>

                      <div className="flex items-center gap-6">
                        <div className="text-right">
                          <span className={`text-2xl font-black font-mono block ${isLimit ? 'text-red-400 animate-pulse' : 'text-cyan-400'}`}>
                            {p.qty}
                          </span>
                          <span className="text-[10px] text-slate-500 uppercase font-semibold block">{p.unit}</span>
                        </div>

                        {(currentRole === 'admin' || currentRole === 'leader') && (
                          <div className="flex flex-col gap-1">
                            <button 
                              onClick={() => {
                                setNewPartForm(p);
                                setIsEditingPart(p.kode);
                                setShowAddPartModal(true);
                              }}
                              className="p-1.5 bg-slate-950 hover:bg-slate-855 rounded-lg text-slate-400 hover:text-white border border-slate-850"
                            >
                              <Edit className="w-3.5 h-3.5" />
                            </button>
                            {currentRole === 'admin' && (
                              <button 
                                onClick={() => handleRemovePart(p.kode)}
                                className="p-1.5 bg-rose-955/30 hover:bg-rose-955/60 rounded-lg text-rose-400 border border-rose-500/15"
                              >
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* ================================================== */}
          {/* TAB: SPREADSHEET SETTINGS & WEBHOOK                */}
          {/* ================================================== */}
          {activeTab === 'google_sheets' && (currentRole === 'admin' || currentRole === 'leader') && (
            <div className="space-y-6 animate-fade-in">
              <div className="p-6 bg-gradient-to-r from-emerald-950/20 to-teal-950/20 rounded-2xl border border-emerald-500/20">
                <h2 className="text-xl font-black text-white flex items-center gap-2">
                  <FileSpreadsheet className="w-6 h-6 text-emerald-400" /> Integrasi Sinkronisasi Google Sheets
                </h2>
                <p className="text-slate-400 text-sm mt-1">Hubungkan database bengkel lokal Anda langsung dengan Google Spreadsheet milik pribadi Anda demi pencadangan data tanpa batas secara aman dan otomatis.</p>
              </div>

              <div className="bg-slate-900/60 p-6 rounded-2xl border border-slate-800 space-y-4">
                <div className="space-y-2">
                  <label className="block text-xs font-extrabold text-slate-400 uppercase tracking-widest">Alamat Web App URL Google Script Anda</label>
                  <div className="flex flex-col sm:flex-row gap-3">
                    <input 
                      type="url" 
                      placeholder="https://script.google.com/macros/s/.../exec"
                      value={spreadsheetUrl}
                      onChange={(e) => setSpreadsheetUrl(e.target.value)}
                      className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-xs text-white focus:outline-none focus:border-emerald-500 font-mono"
                    />
                    {spreadsheetUrl && (
                      <button 
                        onClick={() => {
                          sendToGoogleSheets("test_connection", { timestamp: new Date().toISOString(), operator: currentUserName });
                          triggerToast("Signal uji koneksi terkirim! Periksa sheet Anda.", "success");
                        }}
                        className="bg-emerald-600 hover:bg-emerald-500 text-slate-950 font-black px-5 py-3 rounded-xl text-xs transition-all shadow-lg"
                      >
                        Uji Koneksi Sheet
                      </button>
                    )}
                  </div>
                  <p className="text-[11px] text-slate-500">Apabila diisi, data penambahan inspeksi, log WO, rescue storing, dan ganti ban akan otomatis meluncur ke spreadsheet secara *real-time*.</p>
                </div>

                <div className="pt-4 border-t border-slate-800 space-y-3">
                  <h3 className="text-xs font-black text-white uppercase tracking-wider">Panduan Pemasangan API Google Sheets (Hanya 3 Menit):</h3>
                  <ol className="list-decimal pl-4 text-xs text-slate-400 space-y-2 font-medium">
                    <li>Buat Spreadsheet Baru di Google Drive Anda.</li>
                    <li>Di bilah menu atas Google Sheets, klik menu **Ekstensi** lalu pilih **Apps Script**.</li>
                    <li>Hapus semua baris kode bawaan di dalam editor tersebut, lalu **Salin & Tempel** seluruh blok kode JavaScript di bawah ini:</li>
                  </ol>

                  {/* CODE SNIPPET AREA FOR THE USER */}
                  <div className="bg-slate-955 p-4 rounded-xl border border-slate-850 space-y-2">
                    <div className="flex justify-between items-center text-[10px] text-slate-500 font-mono">
                      <span>GoogleAppsScript.gs</span>
                      <button 
                        onClick={() => {
                          navigator.clipboard.writeText(`function doPost(e) {
  try {
    var content = JSON.parse(e.postData.contents);
    var sheetType = content.sheet;
    var dataObj = content.data;
    
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName(sheetType);
    
    if (!sheet) { sheet = ss.insertSheet(sheetType); }
    
    var headers = Object.keys(dataObj);
    if (sheet.getLastRow() === 0) {
      sheet.appendRow(headers);
    } else {
      headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    }
    
    var rowValues = headers.map(function(key) {
      var val = dataObj[key] !== undefined ? dataObj[key] : "";
      return typeof val === 'object' ? JSON.stringify(val) : val;
    });
    
    // Mencari kunci unik (id, id_wo, atau kode) untuk melakukan update/timpa
    var idToFind = dataObj.id || dataObj.id_wo || dataObj.kode;
    var foundRow = -1;
    
    if (idToFind && sheet.getLastRow() > 1) {
       var data = sheet.getDataRange().getValues();
       var idColIndex = headers.indexOf('id');
       if (idColIndex === -1) { idColIndex = headers.indexOf('id_wo'); }
       if (idColIndex === -1) { idColIndex = headers.indexOf('kode'); }
       
       if (idColIndex !== -1) {
         for (var i = 1; i < data.length; i++) {
           if (String(data[i][idColIndex]).trim() === String(idToFind).trim()) {
             foundRow = i + 1; break;
           }
         }
       }
    }
    
    if (foundRow !== -1) {
      sheet.getRange(foundRow, 1, 1, rowValues.length).setValues([rowValues]);
    } else {
      sheet.appendRow(rowValues);
    }
    
    return ContentService.createTextOutput(JSON.stringify({ status: "success", message: foundRow !== -1 ? "Updated row " + foundRow : "Appended new row" })).setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({ status: "error", error: err.toString() })).setMimeType(ContentService.MimeType.JSON);
  }
}`);
                          triggerToast("Script Code berhasil disalin ke papan klip!", "success");
                        }}
                        className="text-cyan-400 hover:text-white font-bold"
                      >
                        Salin Kode Script
                      </button>
                    </div>
                    <pre className="text-[10px] text-slate-400 font-mono overflow-x-auto p-2 bg-slate-950 rounded border border-slate-900 max-h-40">
{`function doPost(e) {
  try {
    var content = JSON.parse(e.postData.contents);
    var sheetType = content.sheet;
    var dataObj = content.data;
    
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName(sheetType);
    
    if (!sheet) { sheet = ss.insertSheet(sheetType); }
    
    var headers = Object.keys(dataObj);
    if (sheet.getLastRow() === 0) {
      sheet.appendRow(headers);
    } else {
      headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    }
    
    var rowValues = headers.map(function(key) {
      var val = dataObj[key] !== undefined ? dataObj[key] : "";
      return typeof val === 'object' ? JSON.stringify(val) : val;
    });
    
    var idToFind = dataObj.id || dataObj.id_wo || dataObj.kode;
    var foundRow = -1;
    
    if (idToFind && sheet.getLastRow() > 1) {
       var data = sheet.getDataRange().getValues();
       var idColIndex = headers.indexOf('id');
       if (idColIndex === -1) { idColIndex = headers.indexOf('id_wo'); }
       if (idColIndex === -1) { idColIndex = headers.indexOf('kode'); }
       
       if (idColIndex !== -1) {
         for (var i = 1; i < data.length; i++) {
           if (String(data[i][idColIndex]).trim() === String(idToFind).trim()) {
             foundRow = i + 1; break;
           }
         }
       }
    }
    
    if (foundRow !== -1) {
      sheet.getRange(foundRow, 1, 1, rowValues.length).setValues([rowValues]);
    } else {
      sheet.appendRow(rowValues);
    }
    
    return ContentService.createTextOutput(JSON.stringify({ status: "success", message: foundRow !== -1 ? "Updated row " + foundRow : "Appended new row" })).setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({ status: "error", error: err.toString() })).setMimeType(ContentService.MimeType.JSON);
  }
}`}
                    </pre>
                  </div>

                  <ol start="4" className="list-decimal pl-4 text-xs text-slate-400 space-y-2 font-medium">
                    <li>Klik ikon disket (Simpan) di Google Apps Script.</li>
                    <li>Klik tombol biru **Terapkan** (*Deploy*) &gt; pilih **Penerapan Baru** (*New Deployment*).</li>
                    <li>Pilih jenis terapkan: **Aplikasi Web** (*Web App*).</li>
                    <li>Atur aksesibilitas bidang "Yang memiliki akses" (*Who has access*) menjadi **Siapa Saja** (*Anyone*). Ini wajib agar aplikasi React lokal Anda diizinkan mengirim baris data.</li>
                    <li>Klik **Terapkan**, setujui izin verifikasi Google Akun Anda, lalu **Salin URL Aplikasi Web** yang tampil di layar, kemudian tempelkan di kotak isian input di atas!</li>
                  </ol>
                </div>
              </div>
            </div>
          )}

        </main>
      </div>

      <footer className="bg-slate-955 border-t border-slate-900 py-4 px-6 flex flex-col sm:flex-row justify-between items-center text-[10px] text-slate-500 gap-2">
        <p>&copy; 2026 PT Transjakarta Workshop &bull; Depo Rawa Buaya.</p>
        <p className="font-mono text-cyan-500/75">Sistem Integrasi Perawatan Bus Terlengkap v3.5 &bull; Real-time LocalStorage</p>
      </footer>

      {/* ================================================== */}
      {/* INTERACTIVE MODALS & OVERLAYS                      */}
      {/* ================================================== */}
      
      {/* MODAL ASSIGN MEKANIK (LEADER) */}
      {leaderAssignWO && (
        <div className="fixed inset-0 bg-slate-950/85 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-slate-850 p-6 rounded-2xl max-w-lg w-full space-y-4 shadow-2xl animate-scale-up">
            <div className="flex justify-between items-start pb-2 border-b border-slate-800">
              <div>
                <span className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest block">Otorisasi Leader</span>
                <h3 className="text-base font-black text-white mt-0.5">Penugasan & Persetujuan WO: {leaderAssignWO.id}</h3>
                <p className="text-xs text-slate-400 mt-1">Bus Body: {leaderAssignWO.noBody} &bull; Referensi Aduan: &ldquo;{leaderAssignWO.keluhan}&rdquo;</p>
              </div>
              <button onClick={() => setLeaderAssignWO(null)} className="text-slate-500 hover:text-white font-bold text-xl leading-none">&times;</button>
            </div>

            <div className="space-y-4 text-xs">
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Tunjuk Tim Mekanik Draf Shift</label>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-36 overflow-y-auto p-2 bg-slate-950 rounded-xl border border-slate-850">
                  {MECHANICS_LIST.map(name => {
                    const isSelected = assignedMeks.includes(name);
                    return (
                      <button
                        key={name}
                        type="button"
                        onClick={() => {
                          setAssignedMeks(prev => 
                            prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
                          );
                        }}
                        className={`p-1.5 rounded-lg font-bold text-center border transition-all ${
                          isSelected ? 'bg-cyan-500/20 border-cyan-400 text-cyan-300' : 'bg-slate-900 border-slate-855 text-slate-400 hover:text-white'
                        }`}
                      >
                        {name}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Target Pengerjaan</label>
                  <select 
                    value={estimatedDuration} 
                    onChange={(e) => setEstimatedDuration(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white focus:outline-none"
                  >
                    <option value="2">Prioritas Cepat - 2 Jam</option>
                    <option value="4">Servis Standar - 4 Jam</option>
                    <option value="8">Overhaul Berat - 8 Jam</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Catatan Tambahan Instruksi</label>
                  <input 
                    type="text" 
                    value={leaderNotes}
                    onChange={(e) => setLeaderNotes(e.target.value)}
                    placeholder="Contoh: Bongkar kaliper rem..." 
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white focus:outline-none" 
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-4 border-t border-slate-800/60">
                <button onClick={() => setLeaderAssignWO(null)} className="bg-slate-950 hover:bg-slate-855 text-slate-400 px-4 py-2 rounded-xl font-bold text-xs">Batal</button>
                <button onClick={handleAssignWO} className="bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black px-5 py-2 rounded-xl font-bold text-xs">Setujui & Tugaskan</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* MODAL REGISTER/EDIT SPAREPART */}
      {showAddPartModal && (
        <div className="fixed inset-0 bg-slate-950/85 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-slate-850 p-6 rounded-2xl max-w-md w-full space-y-4 shadow-2xl animate-scale-up">
            <div className="flex justify-between items-start pb-2 border-b border-slate-800">
              <h3 className="text-sm font-extrabold text-white flex items-center gap-2">
                <Package className="w-5 h-5 text-cyan-400" />
                {isEditingPart === 'new' ? 'Daftarkan Sparepart Baru' : `Edit Suku Cadang: ${newPartForm.kode}`}
              </h3>
              <button onClick={() => setShowAddPartModal(false)} className="text-slate-500 hover:text-white font-bold text-xl leading-none">&times;</button>
            </div>

            <form onSubmit={handleSavePart} className="space-y-4 text-xs">
              <div>
                <label className="block text-slate-400 font-bold uppercase mb-1">Kode Suku Cadang</label>
                <input 
                  value={newPartForm.kode} 
                  onChange={(e) => setNewPartForm({...newPartForm, kode: e.target.value})}
                  placeholder="Contoh: SP-ALT-24V" 
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white focus:outline-none font-mono" 
                  required 
                  disabled={isEditingPart !== 'new'}
                />
              </div>

              <div>
                <label className="block text-slate-400 font-bold uppercase mb-1">Nama Suku Cadang</label>
                <input 
                  value={newPartForm.nama} 
                  onChange={(e) => setNewPartForm({...newPartForm, nama: e.target.value})}
                  placeholder="Contoh: Alternator Heavy Duty" 
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white focus:outline-none" 
                  required 
                />
              </div>

              <div className="grid grid-cols-3 gap-2">
                <div>
                  <label className="block text-slate-400 font-bold uppercase mb-1">Stok Awal</label>
                  <input 
                    value={newPartForm.qty} 
                    onChange={(e) => setNewPartForm({...newPartForm, qty: e.target.value})}
                    type="number" 
                    placeholder="Qty" 
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white focus:outline-none font-bold text-cyan-400" 
                    required 
                  />
                </div>
                <div>
                  <label className="block text-slate-400 font-bold uppercase mb-1">Satuan</label>
                  <input 
                    value={newPartForm.unit} 
                    onChange={(e) => setNewPartForm({...newPartForm, unit: e.target.value})}
                    placeholder="Pcs / Set" 
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white" 
                    required 
                  />
                </div>
                <div>
                  <label className="block text-slate-400 font-bold uppercase mb-1">Safety Limit</label>
                  <input 
                    value={newPartForm.minQty} 
                    onChange={(e) => setNewPartForm({...newPartForm, minQty: e.target.value})}
                    type="number" 
                    placeholder="Min" 
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2 text-white" 
                    required 
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-4 border-t border-slate-800/60">
                <button type="button" onClick={() => setShowAddPartModal(false)} className="bg-slate-950 hover:bg-slate-855 text-slate-400 px-4 py-2 rounded-xl font-bold">Batal</button>
                <button type="submit" className="bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black px-6 py-2 rounded-xl">Simpan Komponen</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* MODAL RESET SYSTEM CONFIRMATION */}
      {showConfirmReset && (
        <div className="fixed inset-0 bg-slate-950/85 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-rose-500/20 p-6 rounded-2xl max-w-sm w-full space-y-4 shadow-2xl text-center animate-scale-up">
            <div className="w-12 h-12 bg-rose-500/10 text-rose-400 rounded-full flex items-center justify-center mx-auto border border-rose-500/20">
              <ShieldAlert className="w-6 h-6" />
            </div>
            <div>
              <h3 className="text-base font-black text-white">Konfirmasi Reset Data</h3>
              <p className="text-xs text-slate-400 mt-1">Seluruh log perbaikan, data pergantian ban, storing, dan stok gudang akan dikembalikan ke setelan default pabrikan.</p>
            </div>
            <div className="flex gap-2 justify-center">
              <button onClick={() => setShowConfirmReset(false)} className="bg-slate-950 text-slate-400 border border-slate-855 px-4 py-2 rounded-xl text-xs">Batal</button>
              <button onClick={triggerResetSystem} className="bg-rose-600 hover:bg-rose-500 text-white font-bold px-5 py-2 rounded-xl text-xs">Reset Sekarang</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL IMAGE ZOOM VIEW */}
      {zoomImgUrl && (
        <div className="fixed inset-0 bg-slate-950/90 backdrop-blur-md z-50 flex flex-col items-center justify-center p-4" onClick={() => setZoomImgUrl(null)}>
          <div className="max-w-4xl w-full flex justify-end p-2">
            <button className="text-slate-400 hover:text-white font-bold text-lg">Tutup &times;</button>
          </div>
          <img src={zoomImgUrl} alt="Visual Detail" className="max-h-[80vh] max-w-full object-contain rounded-2xl shadow-2xl border border-slate-800" />
        </div>
      )}

      <style>{`
        @keyframes slideIn {
          from { transform: translateX(100%) translateY(-10px); opacity: 0; }
          to { transform: translateX(0) translateY(0); opacity: 1; }
        }
        .animate-slide-in {
          animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .animate-fade-in {
          animation: fadeIn 0.4s ease-out forwards;
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-scale-up {
          animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        @keyframes scaleUp {
          from { transform: scale(0.95); opacity: 0; }
          to { transform: scale(1); opacity: 1; }
        }
        .animate-spin-slow {
          animation: spin 8s linear infinite;
        }
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
      `}</style>

    </div>
  );
}

function LoginForm({ onSubmitLogin }) {
  const [selectedRole, setSelectedRole] = useState('checker');
  const [selectedName, setSelectedName] = useState('');

  useEffect(() => {
    if (selectedRole === 'mechanic') setSelectedName(MECHANICS_LIST[0]);
    else if (selectedRole === 'checker') setSelectedName(CHECKERS_LIST[0]);
    else if (selectedRole === 'leader') setSelectedName("Alvi (Leader Shift A)");
    else setSelectedName("Administrator Utama");
  }, [selectedRole]);

  return (
    <form 
      onSubmit={(e) => {
        e.preventDefault();
        onSubmitLogin(selectedRole, selectedName);
      }} 
      className="space-y-4 text-xs"
    >
      <div>
        <label className="block text-slate-400 font-bold uppercase mb-2">Pilih Peran Shift Dinas</label>
        <div className="grid grid-cols-2 gap-2">
          <button 
            type="button" 
            onClick={() => setSelectedRole('checker')}
            className={`p-3 rounded-xl border text-center font-bold transition-all ${
              selectedRole === 'checker' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-300 shadow-md' : 'bg-slate-955 border-slate-850 text-slate-400'
            }`}
          >
            Checker / Inspeksi
          </button>
          
          <button 
            type="button" 
            onClick={() => setSelectedRole('mechanic')}
            className={`p-3 rounded-xl border text-center font-bold transition-all ${
              selectedRole === 'mechanic' ? 'bg-emerald-600/20 border-emerald-500 text-emerald-300 shadow-md' : 'bg-slate-955 border-slate-855 text-slate-400'
            }`}
          >
            Mekanik Bengkel
          </button>

          <button 
            type="button" 
            onClick={() => setSelectedRole('leader')}
            className={`p-3 rounded-xl border text-center font-bold transition-all ${
              selectedRole === 'leader' ? 'bg-cyan-500/20 border-cyan-400 text-cyan-300 shadow-md' : 'bg-slate-955 border-slate-855 text-slate-400'
            }`}
          >
            Leader Mekanik
          </button>

          <button 
            type="button" 
            onClick={() => setSelectedRole('admin')}
            className={`p-3 rounded-xl border text-center font-bold transition-all ${
              selectedRole === 'admin' ? 'bg-rose-600/20 border-rose-500 text-rose-300 shadow-md' : 'bg-slate-955 border-slate-855 text-slate-400'
            }`}
          >
            Administrator
          </button>
        </div>
      </div>

      <div>
        <label className="block text-slate-400 font-bold uppercase mb-1.5">Pilih / Konfirmasi Nama Operator</label>
        {selectedRole === 'mechanic' && (
          <select 
            value={selectedName} 
            onChange={(e) => setSelectedName(e.target.value)}
            className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-white focus:outline-none"
          >
            {MECHANICS_LIST.map(m => (
              <option className="bg-slate-900 text-white" key={m} value={m}>{m}</option>
            ))}
          </select>
        )}

        {selectedRole === 'checker' && (
          <select 
            value={selectedName} 
            onChange={(e) => setSelectedName(e.target.value)}
            className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-white focus:outline-none"
          >
            {CHECKERS_LIST.map(c => (
              <option className="bg-slate-900 text-white" key={c} value={c}>{c}</option>
            ))}
          </select>
        )}

        {selectedRole === 'leader' && (
          <select 
            value={selectedName} 
            onChange={(e) => setSelectedName(e.target.value)}
            className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-white focus:outline-none"
          >
            <option className="bg-slate-900 text-white" value="Alvi (Leader Shift A)">Alvi (Leader Shift A)</option>
            <option className="bg-slate-900 text-white" value="Samsul (Leader Shift B)">Samsul (Leader Shift B)</option>
          </select>
        )}

        {selectedRole === 'admin' && (
          <input 
            type="text" 
            value={selectedName} 
            disabled 
            className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-slate-300 font-bold"
          />
        )}
      </div>

      <button 
        type="submit" 
        className="w-full bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black py-3 rounded-xl transition-all shadow-lg text-xs"
      >
        Mulai Shift Kerja & Masuk Dashboard
      </button>
    </form>
  );
}